Изменение CSS правила

[Girt]

Всем привет.

Есть задача изменить css правило для всего документа на чистом javascript, чтобы при создании элемента, к нему применялось изменённое свойство.
Было сделано так:

document.styleSheets[1].cssRules[1].cssText=
'p.bodyp {
   font-size: 15px;
   page-break-inside: avoid
}'

Делалось под Opera.
Есть ли более красивое решение проблемы?

 

[dino]

если есть jquery то можно так попробовать:

<style>
.bodyp {
font-size: 15px;
page-break-inside: avoid;
}
</stile>
<script language="javascript">
$('body').addClass("bodyp");
</script>

или использовать
$('body').css('page-break-inside', 'avoid').css('cursor', 'pointer'); и т.д...

 

[Girt]

jQuery нет, сделать нужно без использования библиотек, на чистом javascript.

Функция .css jQuery устанавливает правила css конкретным элементам, т.е. если после вызова этой функции создать элемент
<p class="bodyp">,
то у него свойства css будут по умолчанию, а не те, которые нужны.

 

[pitkina]

(function(d){
var s=d.createElement('style');
s.innerHTML='p.bodyp { font-size: 20px; page-break-inside: avoid }';
d.getElementsByTagName('body')[0].appendChild(s);
}(document));

css в одну строку

 

[Black#FFFFFF]

Ну как то странно. Гхм.
А почему такие пляски с бубном? Потом если придется править стили, придется ходить и исправлять .js файлы.
Можно же сделать так?
Первое: создаем в каскадной таблице 2-3 нужных класса:

p.body{
  font-size: 16px;
}
p.body1{
  font-size: 18px;
}
p.body2{
  font-size: 20px;
}

Вы просто резервируете нужные классы, а потом меняете для элемента. В этих классах вводите только изменяемые свойства.
После чего пишем нужный js:
А потом уже играемся со свойствами:

var pObj = document.createElement('p');
 
var newClassName          = document.createAttribute("className");
newAttr.nodeValue           = "body1";
pObj.setAttributeNode(newClassName);
 
var newID                       = document.createAttribute("id");
newID.nodeValue            = "newID";
pObj.setAttributeNode(newID);
 
 
document.appendChild(pObj);
Ну и дальше в контексте по смыслу:
//если что-то происходит, то
pOb.className = "body2";
//или
pOb.className = "body";
//или...

А если нужно сменить динамически какую-то одну величину вне классов в зависимости от действия посетителя, тогда:

var pObj          = document.getElementById("newID");
if(pObj){
    pObj.style.fontSize = "14px";
}

В чем преимущества?
1. Меняем все стили в одном месте.
2. Не замарачиваемся с кроссбраузерным внедрением каскадных таблиц в тело документа (нафига этот велосипед?), а если Вам потом перекрыть правило, поменять правило? Или везде будете лепить !important?
3. Имеем упрощенный код в случае постоянной динамической смены свойств посетителями. Например, через селекты с выбором font-size. А теперь представьте, если вы будете каждый раз лепить объект стиля в js? Это ж сколько, извините, места то займет?

 

[Girt]

Такие пляски потому что нет возможности правки исходного css.
Приведенное решение в принципе работает.
Но все же хотелось бы уйти от этого:

document.styleSheets[1].cssRules[1]