Javascript-форум - Динамический CSS средствами JS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Динамический CSS средствами JS (https://javascript.ru/forum/misc/11694-dinamicheskijj-css-sredstvami-js.html)

Динамический CSS средствами JS

Вопрос: как?

Нашел статью, но у меня выходит ошибка:

Uncaught exception: ReferenceError: Undefined variable: CSS

http://revnode.com/oss/css/

Для каких целей?

tx - css текст
d - document;
вернет ноду созданного стиля. в IE6 лучше создавать стили до body иначе тормоза сильные.

function include(tx, d) {
	var s;
	if (d.createStyleSheet) try {
		(s = d.createStyleSheet()).cssText += tx;
		return s.owningElement;
		} catch(e){};


	(s = d.createElement('style')).type = 'text/css';
	s.appendChild(d.createTextNode(tx));
	if (d = d.documentElement.firstChild) d.appendChild(s);
	return s;
	};

vflash, я так понял это код динамического добавления css-файла.

Я бы хотел динамический изменять один параметр. А именно: есть коробка, высотой на всю страницу. А ширину (widthtable) задает пользователь.

table.style = 'width: "widthtable"';

Возможно ли сделать такое?

table.style.width = widthtable + 'px';

Aspiring,
А почему через css-файл? Все что есть в нем можно задать через DOM.

Aspiring,
да можно. styleNode.sheet.cssRules (в IE свое наименование).

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

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

B~Vladi, :) спасибо

vflash, спасибо за разъяснения. У меня всего один table

Спасибо Вам форумчане. Уже какой раз обращаюсь к Вам с нелепыми вопросами.

PS: Я счастлив, таблица "нарисовалась" на браузере так, как я задумывал. Думаю, редко кто применял такой способ :)

a[n].style = 'width: 50; height: 50; margin: 5; white-space: pre-line';

widthtable = cols * 55+ 40;
table.style.width = widthtable + 'px';

В результате не вмещенные элементы таблицы идут следующей строкой. Так добивается нужное количество ячеек в каждой строке.

Вначале пробывал вставлять .innerHTML += "<br />" после каждой строки, но после этого неработало свойтво .onclick для всех ячеек, кроме последней строки.

Цитата:

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

a[n].style = 'width: 50; height: 50; margin: 5; white-space: pre-line';

Странно, что это работает... Вообще надо так:

a[n].style.cssText = 'width: 50; height: 50; margin: 5; white-space: pre-line';

Цитата:

Сообщение от B~Vladi (Сообщение 70305)

Странно, что это работает... Вообще надо так:

a[n].style.cssText = 'width: 50; height: 50; margin: 5; white-space: pre-line';

Вот оказывается из-за чего код работал только на Opera. Более того без ошибок при инспектировании страницы.

Все время оставлял на потом. Спасибо, что сэкономили мне время :victory: