Добрый вечер!
Изучаю JS... и в связи с этим есть несколько вопросов:
-
Есть функция, которая берет из объекта некоторые значения и использует их в качестве CSS свойств. Почему при установке цвета границы(border) блока, не получается использовать x-1, при
var x = box.bg.length; ?
Приходится использовать следующий код -
block.style.border = box.border + 'px' + ' solid ' + box.bg[5];
а это, как мне кажется, не очень оптимизированный подход.
- Есть ли более оптимизированный вариант задания стилей для элементов, а то, на мой взгляд, пять строчек кода для пяти свойств - это грубо...
И еще, хотелось бы услышать Ваше мнение и критику если необходимо, по коду в целом.
Вот то, что я понаписал:
window.onload = function() {
var box = {
width: 100,
height: 100,
bg: ['red', 'green', 'blue', 'orange', 'aqua', 'black'],
border: 2
};
function blockShow(css) {
for(i = 0; i < box.bg.length - 1; i++) {
var x = box.bg[i],
a = box.bg.length,
block = document.createElement('div');
block.style.backgroundColor = x;
block.style.width = box.width + 'px';
block.style.height = box.height + 'px';
block.style.height = box.height + 'px';
block.style.border = box.border + 'px' + ' solid ' + box.bg[5]; // 1 вопрос
block.style.marginBottom = box.border + 'px';
document.getElementById('wrapper').appendChild(block);
}
}
blockShow(box);
}
HTML, соответственно:
<div id="wrapper"></div>
А вот живьем - http://jsfiddle.net/Alex83/5jYmC/