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

Тема в разделе "JavaScript", создана пользователем Girt, 20 апр 2012.

Модераторы: ZiX
  1. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    Всем привет.

    Есть задача изменить css правило для всего документа на чистом javascript, чтобы при создании элемента, к нему применялось изменённое свойство.
    Было сделано так:
    Код:
    document.styleSheets[1].cssRules[1].cssText=
    'p.bodyp {
       font-size: 15px;
       page-break-inside: avoid
    }'
    
    Делалось под Opera.
    Есть ли более красивое решение проблемы?
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    если есть 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'); и т.д...
     
  3. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    jQuery нет, сделать нужно без использования библиотек, на чистом javascript.

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

    pitkina

    Регистр.:
    1 апр 2007
    Сообщения:
    253
    Симпатии:
    176
    Код:
    (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 в одну строку
     
    Girt нравится это.
  5. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    175
    Симпатии:
    107
    Ну как то странно. Гхм.
    А почему такие пляски с бубном? Потом если придется править стили, придется ходить и исправлять .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? Это ж сколько, извините, места то займет?
     
  6. Girt

    Girt Постоялец

    Регистр.:
    11 фев 2012
    Сообщения:
    87
    Симпатии:
    62
    Такие пляски потому что нет возможности правки исходного css.
    Приведенное решение в принципе работает.
    Но все же хотелось бы уйти от этого:
    Код:
    document.styleSheets[1].cssRules[1]