Форум

TicTac · #1 (**permalink**) 16.04.2011, 23:32

Доброго времени!

Как добавить в head стили, а в body используя цикл дописать детей

function _columns(a)
{
	var style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = '.column_ { position: fixed; z-index: 999; top: 0; display: block; height: 100%; border-right: 1px dashed #4affff; } * html .column_ {position: absolute; }';
	document.getElementsByTagName("head").appendChild(style);
	
    for (var i = 0, l = a.length; i < l; i++)
    		var line = document.createElement('span');
		line.class = 'column_';
		line.style = 'left:' +  a[i] + '%'
		document.getElementsByTagName("body").appendChild(line);	
	
}

пытаюсь сделать как то так, но выскакивает ошибка

Цитата:

Uncaught TypeError: Object #<NodeList> has no method 'appendChild'

что можно еще использовать кроме appendChild или можно как-то через appendChild сделать?

рони · #2 (**permalink**) 17.04.2011, 00:50

TicTac,
Примерно так )))

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script type="text/javascript">
window.onload = function () {
function _columns(d) {
    var a = document.createElement("style"),
        c = ".column_ { position: fixed; z-index: 999; top: 0; display: block; height: 100%; border-right: 1px dashed #4affff; } * html .column_ {position: absolute; }";
    a.setAttribute("type", "text/css");
    a.styleSheet ? a.styleSheet.cssText = c : (c = document.createTextNode(c), a.appendChild(c));
    document.getElementsByTagName("head")[0].appendChild(a);
    a = 0;
    for (b = d.length; a < b; a++) c = document.createElement("span"), c.className = "column_", c.style.left = d[a] + "%", document.body.appendChild(c)
};
_columns([10,20,30,40,50])
};
</script>
</head>
<body>
</body>
</html>

melky · #3 (**permalink**) 17.04.2011, 02:52

Сообщение от TicTac

пытаюсь сделать как то так, но выскакивает ошибка

ясное дело, будет выскакивать

смотри внимательно на подчеркнутое

function _columns(a)
{
	var style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = '.column_ { position: fixed; z-index: 999; top: 0; display: block; height: 100%; border-right: 1px dashed #4affff; } * html .column_ {position: absolute; }';
	document.getElementsByTagName("head").appendChild(style);
	
    for (var i = 0, l = a.length; i < l; i++)
    		var line = document.createElement('span');
		line.class = 'column_';
		line.style = 'left:' +  a[i] + '%'
	
// забыл [0]
	*!*document.getElementsByTagName("body")[0].appendChild(line);*/!*	
	
}

TicTac · #4 (**permalink**) 17.04.2011, 20:58

рони,melky, спасибо, заработало

Magneto · #5 (**permalink**) 17.04.2011, 21:03

или

document.body.appendChild(line);

это работает только для body, для head по прежнему нужно выбирать по TagName.

TicTac · #6 (**permalink**) 17.04.2011, 22:01

Magneto, ага видел такой подход

можно еще такой вопросик, в массиве есть два параметра в данном случае мне нужен первый, который содержит название css декларации, код

line.style.pers_param[0] = a[i];

не работает, а если сделать так

var av = pers_param[0];
line.style.av = a[i];

работает, можно как-то все таки заставить брать значение из массива, чтобы не создавать отдельную переменную для этого...

хотя нет, тоже не работает , ошибок не выдает, но ожидаемого например left из массива line.style.left и выполнения line.style.left = ... ничего не происходит, не добавляется декларация left (

рони · #7 (**permalink**) 17.04.2011, 22:20

TicTac,

line.style[pers_param[0]] = a[i];

TicTac · #8 (**permalink**) 17.04.2011, 22:32

рони, уго) работает

спасибо большое

TicTac · #9 (**permalink**) 17.04.2011, 23:33

рони,
а зачем нужна эта проверка для кроссбраузерности?

a.styleSheet ? a.styleSheet.cssText = c : (c = document.createTextNode(c), a.appendChild(c));

я у себя использовал

style.innerHTML

как-то в хроме сработало так и оставил, а когда открыл в ие7,8 обломался - не работает, а если сделать с такой проверкой как у Вас все отлчно работает даже в ие

спасибо

рони · #10 (**permalink**) 17.04.2011, 23:58

TicTac,
немного покороче можно

a.styleSheet ? a.styleSheet.cssText = c : a.textContent = c;

Форум

Справочник

Discord чат

Курсы javascript