Отримайте значення CSS за допомогою JavaScript

Я знаю, що я можу встановити значення CSS через JavaScript, наприклад:

document.getElementById('image_1').style.top = '100px';

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

Можна використовувати getComputedStyle().

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle .

Властивість element.style дозволяє вам знати лише властивості CSS, які були визначені як вбудовані в цьому елементі (програмно або визначено в атрибуті стилю елемента), ви повинні отримати обчислений стиль.

Це не так просто зробити крос-браузерним способом, IE має свій власний шлях через властивість element.currentStyle, а стандартний спосіб DOM рівня 2, реалізований іншими браузерами, здійснюється методом document.defaultView.getComputedStyle.

Два способи мають відмінності, наприклад, властивість IE element.currentStyle очікує, що ви отримаєте доступ до імен властивостей CSS, що складаються з двох або більше слів у camelCase (наприклад, maxHeight, fontSize, backgroundColor тощо), стандартний спосіб очікує властивості з слова, розділені тире (наприклад, максимальна висота, розмір шрифту, колір тла тощо). ......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
            return (function(value) {
                var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

Основний еталонний потік потоку

Скористайтеся наступним. Це мені допомогло.

document.getElementById('image_1').offsetTop

Дивіться також Отримати стилі .

Рішення між переглядачами для перевірки значень CSS без маніпуляції з DOM:

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

Використання:

get_style_rule_value('.chart-color', 'backgroundColor')

Санітована версія (примушує введення селектора в малі регістри та дозволяє використовувати регістр без "". ")

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }

Якщо встановити його програмно, ви можете просто назвати його як змінну (тобто document.getElementById('image_1').style.top). В іншому випадку ви завжди можете використовувати jQuery:

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>

Якщо ви перебуваєте в бібліотеках, чому б не MyLibrary і getStyle .

Метод jQuery css неправильно називається, CSS - лише один із способів встановлення стилів і не обов'язково представляє фактичні значення властивостей стилю елемента.

У 2020 році

перевірити перед використанням

Ви можете використовувати computedStyleMap ()

Відповідь є дійсною, але іноді вам потрібно перевірити, яку одиницю вона повертає, ви можете отримати її без будь-якого slice()або substring()рядка.

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);

.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}

<div class="jsCSS"></div>

В цілях безпеки ви можете перевірити, чи існує елемент, перш ніж спробувати прочитати з нього. Якщо його не існує, ваш код видасть виняток, який зупинить виконання на іншій частині вашого JavaScript і, можливо, відобразить повідомлення про помилку користувачеві - не добре. Ви хочете мати можливість вийти з ладу витончено.

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}

Рішення крос-браузера без маніпуляцій з DOM, наведеним вище, не працює, оскільки воно дає перше правило узгодження, а не останнє. Останнє правило узгодження - це те, що застосовується. Ось робоча версія:

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}  

Однак цей простий пошук не спрацює у випадку складних селекторів.