Xpoint
   [напомнить пароль]

Изменение стилей CSS через Javascript

2007-01-08 23:41:15 [обр] frobenius [досье]

Добрый вечер. Подскажите пожалуйста, где найти таблицу соответствий для изменения стилей элементов через 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'; // &&#239&&&&#238&&&&#247&&&&#229&&&&#236&&&&#243&& &&#237&&&&#229&& background-color &&#234&&&&#224&&&&#234&& &&#226&& 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>
спустя 18 минут [обр] Туговиков Станислав [досье]
спустя 10 минут [обр] Евгений Петров [досье]
text-decoration => textDecoration и т.д.
Обратите внимание на исключения вроде float.
спустя 5 минут [обр] frobenius [досье]
Спасибо большое.
просто хотел найти единую удобную таблицу со всеми этими соответствиями.
Станислав, Вы не подскажете, где по вашей ссылке - нужная информация?
Например, того же самого textDecoration я не нашел там...
спустя 43 минуты [обр] Андрей Гора [досье]
спустя 25 минут [обр] Евгений Петров [досье]
frobenius[досье] Даже не задумывался о том, что в IE используется не cssFloat, определенный в спецификации, а styleFloat.
А вообще - используйте лучше классы, чем переписывать стили.
спустя 6 минут [обр] Владимир Палант [досье]
Вообще-то есть еще метод style.setProperty(), который принимает название стиля без изменений. Но, что характерно, IE его не поддерживает.
спустя 1 час 31 минуту [обр] Андрей Гора [досье]
Владимир Палант[досье]
Аналог 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>
спустя 37 минут [обр] Евгений Петров [досье]

Андрей Гора[досье] Ну тогда по логике для остальных, кроме IE, нужно insertRule().

А вообще, речь идет о динамически создаваемых элементах. IMHO setProperty() не подходит, иначе тогда проще оперировать классами. Тем более, что в коде не видно вычисляемых данных.

спустя 29 минут [обр] Андрей Гора [досье]
Или же, соблюдая последовательность, раз уж document.createElement("div"), тогда для него document.createElement('STYLE')
спустя 8 часов [обр] AKS [досье]
Добавлю и я свой вариант (без претензий на оптимальность):
    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);
спустя 9 дней [обр] Александр Берестов [досье]

Где взять, где взять... написать функцию-дамп:

<!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>

и все поддерживаемые броузером стили объекта у вас будут перед глазами.

спустя 1 час 56 минут [обр] Владимир Палант [досье]
Александр Берестов[досье]
Тогда можно и в документацию заглянуть. Для Gecko она здесь.
Powered by POEM™ Engine Copyright © 2002-2005