Динамичное создание стилей

[Hagrael]

Вот у меня скрипт:

screen_width=screen.width
screen_height=screen.height
main_table_width=screen_width
logo_width=screen_width
logo_height=screen_height*189/768
up_menu_width=screen_width
up_menu_height=screen_height*37/768
left_panel_width=screen_height*160/768
left_panel_padding=screen_width*5/1024
menu_title_width=screen_width*150/1024
menu_title_height=screen_height*18/768
menu_item_width=screen_width*150/1024
menu_item_height=screen_height*25/768
content_padding=screen_width*6/1024
right_panel_width=screen_width*160/1024
right_panel_padding=screen_width*5/1024
profil_table_padding=screen_height*6/768
avatar_width=screen_width*150/1024
avatar_padding_top=screen_height*10/768
avatar_padding_bottom=screen_height*6/768
avatar_h_padding=screen_width*5/1024 

if (document.styleSheets[0].insertRule()) {
	document.styleSheets[0].insertRule("table.main_table {width: "+main_table_width+"px;}",0)
	document.styleSheets[0].insertRule("img.logo {width: "+logo_width+"px; height: "+logo_height+"px; border:0px;}",0)
	document.styleSheets[0].insertRule("td.up_menu {width: "+up_menu_width+"px; height: "+up_menu_height+"px; background-image: url('img/up_menu.png'); text-align: center;}",0)
	document.styleSheets[0].insertRule("td.left_panel {width: "+left_panel_width+"px; padding-left: "+left_panel_padding+"px}",0)
	document.styleSheets[0].insertRule("td.menu_title {width: "+menu_title_width+"px; height: "+menu_title_height+"px; background-image: url('img/menu_title.png');	font-weight: bold;	text-align: center;	background-repeat: repeat;	background-position: center center;}",0)
	document.styleSheets[0].insertRule("td.menu_item {width: "+menu_item_width+"px; height: "+menu_item_height+"px;	text-align: center;	background-image: url('img/menu_item.png');	border: 1px solid black; border-top: 0px;}",0)
	document.styleSheets[0].insertRule("td.content {color: white; padding-left: "+content_padding+"px;}",0)
	document.styleSheets[0].insertRule("td.right_panel {width: "+right_panel_width+"px; padding-right: "+right_panel_padding+"px}",0)
	document.styleSheets[0].insertRule("table.profil_table {border: 1px solid black; padding-bottom: "+profil_table_padding+"px;}",0)
	document.styleSheets[0].insertRule("td.avatar {width: "+avatar_width+"px; padding-top: "+avatar_padding_top+"px; padding-bottom: "+avatar_padding_bottom+"px; padding-right: "+avatar_h_padding+"px; padding-left: "+avatar_h_padding+"px}",0)
} else {
if (document.styleSheets[0].addRule()) {
	document.styleSheets[0].addRule("table.main_table","width: "+main_table_width+"px;")
	document.styleSheets[0].addRule("img.logo","width: "+logo_width+"px; height: "+logo_height+"px; border:0px;")
	document.styleSheets[0].addRule("td.up_menu","width: "+up_menu_width+"px; height: "+up_menu_height+"px; background-image: url('img/up_menu.png'); text-align: center;}")
	document.styleSheets[0].addRule("td.left_panel","width: "+left_panel_width+"px; padding-left: "+left_panel_padding+"px")
	document.styleSheets[0].addRule("td.menu_title","width: "+menu_title_width+"px; height: "+menu_title_height+"px; background-image: url('img/menu_title.png');	font-weight: bold;	text-align: center;	background-repeat: repeat;	background-position: center center;")
	document.styleSheets[0].addRule("td.menu_item","width: "+menu_item_width+"px; height: "+menu_item_height+"px;	text-align: center;	background-image: url('img/menu_item.png');	border: 1px solid black; border-top: 0px;")
	document.styleSheets[0].addRule("td.content","color: white; padding-left: "+content_padding+"px;")
	document.styleSheets[0].addRule("td.right_panel","width: "+right_panel_width+"px; padding-right: "+right_panel_padding+"px")
	document.styleSheets[0].addRule("table.profil_table","border: 1px solid black; padding-bottom: "+profil_table_padding+"px;")
	document.styleSheets[0].addRule("td.avatar","width: "+avatar_width+"px; padding-top: "+avatar_padding_top+"px; padding-bottom: "+avatar_padding_bottom+"px; padding-right: "+avatar_h_padding+"px; padding-left: "+avatar_h_padding+"px")
}
}

Но в IE не отображается, хотя должно (addRule - функция IE). Что делать?

[Hagrael]

Вот уменьшенная версия скрипта (создаёт один класс):

screen_width=screen.width
screen_height=screen.height
main_table_width=screen_width
if (document.styleSheets[0].insertRule()) {
	document.styleSheets[0].insertRule("table.main_table {width: "+main_table_width+"px;}",0)
} else {
if (document.styleSheets[0].addRule()) {
document.styleSheets[0].addRule("table.main_table","width: "+main_table_width+"px;")
}
}

[Sweet]

То, что вы делаете глупо на мой взгляд. Не дело это для javascript'а, css создавать.

[Hagrael]

Sweet, а как же тогда мне динамично создать стили?

[Sweet]

А зачем динамически создавать стили? Я так понимаю, задача, чтобы элементы имели размер в зависимости от размера окна? Тогда в css будет что-нибудь на случай отключенного js, а скрипт будет записавать стили через свойства .style

[AlexF]

if (document.styleSheets[0].addRule) {} // IE9, Chrome последний

if (document.styleSheets[0].insertRule) {} // Opera последний

Так у меня заработало, а то ответ никто не писал, а yandex дает ссылку на топик...
Chrome притомаживает с инициализацией почему-то
И ваще не совсем понял..., никто ничего не создает, а просто меняет, наверно, да? Ну просто я олень видимо...

[melky]

И ваще не совсем понял..., никто ничего не создает, а просто меняет, наверно, да?

создается всё. а насчёт проблемы в IE - то возможно была проблема с самой stylesheet, т.к. IE понимает только те stylesheets, которые созданы с помощью createStyleSheet, или же тег <style> уже находился на странице (а не добавлялся скриптом)

[AlexF]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="CSS/Index.css" type="text/css" />
 </head>
 <body>
  <div class="menu" id="test"></div>  
  <script type="text/javascript" src="SCR/Index.js"></script>
 </body>
</html>

Index.css

.menu{position:left; border: 10px solid #CCCCCC; width: 180px; background: #036;}

Index.js

el=document.getElementById('test');
el.style.top=el.offsetTop +'px'; 
if (document.styleSheets[0].addRule) {document.styleSheets[0].addRule(".menu","position: fixed")};
if (document.styleSheets[0].insertRule) {document.styleSheets[0].insertRule(".menu {position: fixed", 0)};

Может если и создается (в Index.js), то прописывается после существующих параметров (в Index.css), что в принципе работает как замена существующих...
Я, например, применяю этот способ для получения offsetTop (div id="test"), потом присваиваю это значение свойству style.top (div id="test"), а потом даю position: fixed (вместо left) и управляю, но если JS отключен, то пользуйся тем что есть или не так?
А, забыл... Работает в IE!

[AlexF]

А, понял там скобки, наверно, лишние в области параметров
if (document.styleSheets[0].insertRule())

[vflash]

думаю вам проще будет создать тег style и вставить в него текст одним разом.

function create_style(d, text) {
	d = d || document;
	var s;

	if (d.createStyleSheet) {
		s = d.createStyleSheet();
		try {s.cssText += text} catch (e) {};
		return s.owningElement;
	};

	s = d.createElement('style');
	s.type = 'text/css';
	s.appendChild(
		d.createTextNode(text)
	);

	if (d = d.getElementsByTagName('head')[0]) {
		d.appendChild(s);
	};

	return s;
};