Зміна значень 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 
— Колтін
джерело
ви могли б відредагувати свою публікацію? на початку є кілька неповних пропозицій, не впевнені, що ви шукали ...
— Jason S
Я все ще трохи розгублений з приводу того, що ви запитуєте. Ви просите 1) змінити сам CSS, який змінить всі елементи одразу? або 2) змінити CSS одночасно для одного елемента?
— Майк
Я також розгублений щодо власне питання. Поточний стиль об’єкта не обов'язково буде таким самим, як атрибут "style" тегу.
— MattJ
Вибачте, я відредагую це, щоб було більш зрозуміло. Я не хочу встановлювати вбудований CSS. Я хотів би мати можливість збільшити / зменшити ширину стилю. Я відредагую повний приклад того, що я шукаю.
— Колтін
— Нік Мітчелл

Відповіді:

90

Гаразд, це здається, що ви хочете змінити глобальний CSS, що дозволить ефективно змінити всі елементи петикулярного стилю відразу. Нещодавно я навчився робити це самостійно з підручника Шона Олсона . Ви можете прямо посилатися на його код тут .

Ось підсумок:

Ви можете завантажити таблиці стилів за допомогою 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 таким чином набагато швидше, якщо у вас 100s + елементів. Скажімо, наприклад, змінивши відразу всі комірки в певній частині таблиці.
— 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.
— Крістіан Айхінгер
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>

Ой ..

EDIT: як описано у своїй відповіді @ 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
Дуже приємна реалізація. Кудо вам сер.
— Джейсон Маґґард
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){}
}

Зауважте, що ми можемо перекрити навіть стилі вбудованої форми, встановлені безпосередньо на елементах, додавши "! Важливо" до значення властивості, якщо тільки для цього властивості вже немає більш специфічних "! Важливих" оголошень стилю.

— користувач21820
джерело
1
Дивіться developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… для більш складної версії.
— user21820
1
Дуже правильно. Обов’язково використовуйте .addRule (селектор, властивість + ':' + значення), якщо .insertRule виходить з ладу (для попередньої підтримки IE9).
— Леонард Паулі
3

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

Здається, коли стилі елементів визначені в таблицях стилів, їх не видно в стилі getElementById ("someElement").

Цей код ілюструє проблему ... Код знизу на 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 на зразок прототипу чи jQuery (пошук "getStyle" у файлі JavaScript-прототипу та "curCss" у файлі JavaScript jquery).

Це означає, що якщо вам потрібна висота або ширина, ви, ймовірно, повинні використовувати element.offsetHeight і element.offsetWidth.

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

Майте на увазі, якщо ви додаєте стиль вбудованого тексту до відповідного елемента, він може діяти як значення "за замовчуванням" і його можна читати за допомогою Javascript при завантаженні сторінки, оскільки це властивість стилю вбудованого елемента:

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

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

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

— Ракеш Пай
джерело
Моє використання: <style> #tid {ширина: 10%; } </style> <div id = 'tid' onclick = "збільшення ('tid')"> </div> збільшення перевірить, чи ширина <100%, якщо так, то зросте на 1%. document.getElementById.style.width повертає null, оскільки немає вбудованого значення. Чи є більш простий спосіб, ніж таблиці стилів DOM?
— Колтін
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
}
— Шак
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.