Изменение значений CSS с помощью Javascript

105

Встроенные значения CSS легко установить с помощью javascript. Если я хочу изменить ширину и у меня есть вот такой HTML:

<div style="width: 10px"></div>

Все, что мне нужно сделать, это:

document.getElementById('id').style.width = value;

Это изменит значения встроенной таблицы стилей. Обычно это не проблема, потому что встроенный стиль переопределяет таблицу стилей. Пример:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Используя этот Javascript:

document.getElementById('tId').style.width = "30%";

Получаю следующее:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

Это проблема, потому что я не только не хочу изменять встроенные значения, если я ищу ширину перед ее установкой, когда у меня есть:

<div id="tId"></div>

Возвращаемое значение равно Null, поэтому, если у меня есть Javascript, которому необходимо знать ширину чего-либо для выполнения некоторой логики (я увеличиваю ширину на 1%, а не до определенного значения), возвращаю Null, когда я ожидаю строку «50%. "действительно не работает.

Итак, мой вопрос: у меня есть значения в стиле CSS, которые не расположены встроенными, как я могу получить эти значения? Как я могу изменить стиль вместо встроенных значений с учетом идентификатора?

javascript html css ajax dom Coltin
источник

не могли бы вы отредактировать свой пост? в начале есть несколько неполных предложений, не уверен, что вы искали ...

Джейсон С.

Я все еще немного не понимаю, о чем вы спрашиваете. Вы просите 1) изменить сам CSS, который изменит все элементы сразу? или 2) изменить CSS для одного элемента за раз?

Майк,

Я также смущен фактическим вопросом. Текущий стиль объекта не обязательно должен совпадать с атрибутом style тега.

MattJ

Извините, я отредактирую, чтобы было понятнее. Я не хочу устанавливать встроенный CSS. Я хотел бы иметь возможность увеличивать / уменьшать ширину стиля. Я отредактирую с полным примером того, что я ищу.

Coltin

Ответ Codepen codepen.io/quezo/post/dynamically-updating-css

Ник Митчелл

90

Хорошо, похоже, вы хотите изменить глобальный CSS, чтобы эффективно изменить все элементы стиля peticular одновременно. Я недавно научился делать это сам из учебника Шона Олсона . Вы можете напрямую сослаться на его код здесь .

Вот резюме:

Вы можете получить таблицы стилей через document.styleSheets. Фактически это вернет массив всех таблиц стилей на вашей странице, но вы можете определить, на какой из них вы находитесь, с помощью document.styleSheets[styleIndex].hrefсвойства. После того, как вы нашли таблицу стилей, которую хотите отредактировать, вам нужно получить массив правил. Это называется «правилами» в IE и «cssRules» в большинстве других браузеров. Способ узнать, какое CSSRule вы используете, - это selectorTextсвойство. Рабочий код выглядит примерно так:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Сообщите мне, как это работает для вас, и прокомментируйте, если увидите какие-либо ошибки.

Майк
источник

1

Такой способ изменения CSS выполняется намного быстрее, если у вас более 100 элементов. Скажем, например, изменение всех ячеек в определенной части таблицы сразу.

EdH

5

Я не могу найти rule.valueв FF 20. Однако есть rule.style, который настраивается и ведет себя как element.style. Ср. https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule . Проверка rule.type == rule.STYLE_RULEтакже может быть хорошей идеей , перед обращением rule.selectorText.

Christian Aichinger

1

ЭТО БЫЛО ПОТРЯСАЮЩЕ! Я работал над переходами изображений, и CSS действительно тормозит, когда вы начинаете помещать большое изображение в 36 отдельных URI для нарезки. Это просто сняло массу накладных расходов с моего сценария. Спасибо!

Джейсон Мэггард

1

В 2016 году используйте это: developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/…

the_web

document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};у меня сработало, спасибо!

Павел

43

Пожалуйста! Просто спросите w3 ( http://www.quirksmode.org/dom/w3c_css.html )! Или на самом деле мне потребовалось пять часов ... но вот оно!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

Функция очень проста в использовании .. пример:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

Ой..

РЕДАКТИРОВАТЬ: как @ user21820 описал в своем ответе, возможно, нет необходимости изменять все таблицы стилей на странице. Следующий скрипт работает с IE5.5, а также с последней версией Google Chrome и добавляет только описанную выше функцию css ().

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);

Леонард Паули
источник

Серьезно простая реализация. Спасибо

Калеб Андерсон

1

Есть ли причина для изменения каждой отдельной таблицы стилей, а не только одной вновь созданной, как в моем ответе?

user21820 05

Очень красивая реализация. Престижность вам, сэр.

Джейсон Мэггард

1

@ user21820, наверное, нет. Думаю, я действительно хотел перестраховаться .. Наконец-то ответ обновлен, слава вам :)

Леонард Паули

10

Собрав код в ответах, я написал эту функцию, которая, похоже, хорошо работает на моем FF 25.

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

Это способ поместить значения в CSS, которые будут использоваться в JS, даже если они не будут поняты браузером. например maxHeight для тела в прокручиваемой таблице.

Вызов :

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

FrViPofm
источник

1

Если стиль встроен в HTML-страницу, он document.styleSheets[m].hrefбудет нулевым и завершится ошибкой.

JCM

4

Я не знаю, почему другие решения просматривают весь список таблиц стилей для документа. Это создает новую запись в каждой таблице стилей, что неэффективно. Вместо этого мы можем просто добавить новую таблицу стилей и просто добавить туда желаемые правила CSS.

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

Обратите внимание, что мы можем переопределить даже встроенные стили, установленные непосредственно для элементов, добавив "! Important" к значению свойства, если для этого свойства еще не существует более конкретных объявлений стиля "! Important".

user21820
источник

1

См. Developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… для более сложной версии.

user21820 05

1

Совершенно верно. Обязательно используйте .addRule (селектор, свойство + ':' + значение), если .insertRule не работает (для поддержки до IE9).

Леонард Паули,

3

У меня недостаточно репутации для комментариев, поэтому я отформатирую ответ, но это всего лишь демонстрация рассматриваемой проблемы.

Кажется, когда стили элементов определены в таблицах стилей, они не видны для getElementById ("someElement"). Style

Этот код иллюстрирует проблему ... Код снизу на jsFiddle .

В тесте 2 при первом вызове оставшееся значение элемента не определено, и поэтому то, что должно быть простым переключателем, испортилось. Для моего использования я определю свои важные значения стиля встроенными, но, похоже, это частично противоречит цели таблицы стилей.

Вот код страницы ...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

Я надеюсь, что это поможет пролить свет на проблему.

Пропускать

BentFX
источник

2

Вы можете получить "вычисленные" стили любого элемента.

IE использует что-то под названием «currentStyle», Firefox (и я предполагаю, что другие браузеры, «соответствующие стандартам») использует defaultView.getComputedStyle.

Для этого вам нужно написать кроссбраузерную функцию или использовать хороший фреймворк Javascript, такой как prototype или jQuery (найдите "getStyle" в файле прототипа javascript и "curCss" в файле javascript jquery).

Тем не менее, если вам нужна высота или ширина, вам, вероятно, следует использовать element.offsetHeight и element.offsetWidth.

Возвращаемое значение равно Null, поэтому, если у меня есть Javascript, которому нужно знать ширину чего-либо, чтобы выполнять некоторую логику (я увеличиваю ширину на 1%, а не до определенного значения)

Помните, что если вы добавите встроенный стиль к рассматриваемому элементу, он может действовать как значение «по умолчанию» и будет читаться Javascript при загрузке страницы, поскольку это свойство встроенного стиля элемента:

<div style="width:50%">....</div>

источник

0

Эта простая 32-строчная суть позволяет вам идентифицировать данную таблицу стилей и очень легко изменять ее стили:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");

солендил
источник

0

Я никогда не видел практического применения этого, но вам, вероятно, следует подумать о таблицах стилей DOM . Однако я, честно говоря, считаю, что это перебор.

Если вы просто хотите получить ширину и высоту элемента, независимо от того, откуда применяются размеры, просто используйте element.offsetWidthи element.offsetHeight.

Ракеш Пай
источник

Мое использование: <стиль> #tid {ширина: 10%; } </style> <div id = 'tid' onclick = "Увеличить ('tid')"> </div> увеличение будет проверять, составляет ли ширина <100%, если да, то она увеличится на 1%. document.getElementById.style.width возвращает значение null, поскольку нет встроенного значения. Есть ли более простой способ, чем таблицы стилей DOM?

Coltin

0

Возможно, попробуйте это:

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

Шак
источник

Изменение значений CSS с помощью Javascript

Ответы: