![[logo]](/site/images/logo.jpg){kind=logo}
Изменение стилей CSS через Javascript
Добрый вечер. Подскажите пожалуйста, где найти таблицу соответствий для изменения стилей элементов через CSS и через Javascript?
У меня для стиля: для описанного статически - все ок. а вот для созданного динамически ( стили тоже динамически ) - применяются далеко не все.
Пожалуйста, расскажите, почему не все работает и некоторые названия отличаются (background-color в CSS и background в Javascript )
а эти (а может и еще многие) вообще не работают при динамическом задании font-size, text-decoration, font-weight.
в примере ниже видно, что только половина стиля применилась для созданного динамически DIV-a
<HTML>
<HEAD>
<style>
div#b {font-size:60%; width:200px; height:50px; border:1px solid black; overflow:auto; text-decoration:underline;}
</style>
<script>
function aaa() {
arrBodies = document.getElementsByTagName('body');
bodyElement = arrBodies.item(0);
var divElement = document.createElement("div");
divElement.innerHTML = '<div id="scroll">1<br>2<br>3<br>4<br>5</div>';
bodyElement.appendChild(divElement);
var ct = document.getElementById('scroll');
// work
ct.style.overflow= 'auto';
ct.style.width = 200;
ct.style.height = 50;
ct.style.border = '1px solid black';
ct.style['background'] = '#e4e8eA'; // &ï&&&î&&&÷&&&å&&&ì&&&ó&& &í&&&å&& background-color &ê&&&à&&&ê&& &â&& CSS ?
ct.style['color'] = 'blue';
// dont work !!!
ct.style['font-size'] = '60%';
ct.style['text-decoration'] = 'underline';
ct.style['font-weight'] = 'bold';
}
</script>
</HEAD>
<BODY onLoad="aaa();">
<div id="b">1<br>2<br>3<br>4<br>5</div> <p>
</BODY>
</HTML>
просто хотел найти единую удобную таблицу со всеми этими соответствиями.
Станислав, Вы не подскажете, где по вашей ссылке - нужная информация?
Например, того же самого textDecoration я не нашел там...
cssFloat, определенный в спецификации, а styleFloat.А вообще - используйте лучше классы, чем переписывать стили.
Аналог style.setProperty() для IE - addRule()
Все вместе:
<STYLE>
SPAN{font-size:33px}
</STYLE>
<SPAN>testStyle</SPAN>
<INPUT type="Button" value="doStyle" onclick="doStyle()">
<SCRIPT>
function doStyle(){
if (document.styleSheets[0].cssRules) document.styleSheets[0].cssRules[0].style.setProperty('font-size','10px',null)
else document.styleSheets[0].addRule('SPAN','font-size:10px')
}
</SCRIPT>
Андрей Гора[досье] Ну тогда по логике для остальных, кроме IE, нужно insertRule().
А вообще, речь идет о динамически создаваемых элементах. IMHO setProperty() не подходит, иначе тогда проще оперировать классами. Тем более, что в коде не видно вычисляемых данных.
document.createElement("div"), тогда для него document.createElement('STYLE')
var ct = document.getElementById('scroll'),
/* далее - строка "в стиле" css */
styles = 'width:200px;height:50px;background-color:#e4e8eA;';
if (ct.getAttribute('style'))
ct.style.cssText = styles;
else
ct.setAttribute('style', styles);
Где взять, где взять... написать функцию-дамп:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head></head>
<body>
<div id="mydiv"></div>
<script type="text/javascript">
function print_f(id)
{
var str = '';
if(typeof(id) == "object"){
for(a in id){
str += (a +"");
}
}
alert(str);
}
print_f(document.getElementById('mydiv').style);
</script>
</body>
</html>
и все поддерживаемые броузером стили объекта у вас будут перед глазами.