Я знаю, что не могу moment Значение CSS с помощью JavaScript, например:

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

Но могу ли я Пример JSFiddle (протестировано позднее Safari, FF, Chrome, Edge и IE11) текущее значение определенного стиля? Я прочитал, где я могу получить весь стиль для элемента, но я не хочу анализировать всю строку, если мне не нужно.

Вы можете использовать getComputedStyle() Глядя на вывод

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

— Пользовательский агент получил некоторые данные изображения. Глядя на вывод

Свойство element.style позволяет вам знать только CSS свойства, которые были определены как встроенные в этом элементе (программно, или определены в атрибуте style элемента), вы должны получить вычисляемый стиль.

Это не так просто сделать кросс-браузерным способом, у IE есть свой собственный путь через свойство element.currentStyle, а стандартный способ DOM Level 2, реализованный другими браузерами, — через document.defaultView.getComputedStyle метод.

Два способа имеют различия, например, свойство IE element.currentStyle предполагает, что вы обращаетесь к именам свойств CSS, состоящим из двух или более слов в camelCase (например, maxHeight, fontSize, backgroundColor и т. Д.), Стандартный способ ожидает свойства со словами, разделенными тире (например, max-height, font-size, background-color и т. д.) …….

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;
    }
}

Основная ссылка StackOverflow

Используйте следующее. Это помогло мне.

document.getElementById('image_1').offsetTop

См. Также: обработчик Get Styles Глядя на вывод

Кросс-браузерное решение для проверки значений 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 https://developers.google.com/web/updates/2018/03/clipboardapi назван неправильно, CSS — это всего лишь один из способов установки стилей и не обязательно представляют фактические значения свойств стиля элемента.

В целях безопасности вы можете проверить, существует ли этот элемент, прежде чем пытаться читать с него. Если он не существует, ваш код выдаст исключение, которое остановит выполнение остальной части вашего 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;
}  

Функция