Nhận giá trị CSS bằng JavaScript

Tôi biết tôi có thể đặt giá trị CSS thông qua JavaScript, chẳng hạn như:

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

Nhưng, tôi có thể nhận được một giá trị kiểu cụ thể hiện tại không? Tôi đã đọc nơi tôi có thể lấy toàn bộ kiểu cho phần tử, nhưng tôi không muốn phải phân tích toàn bộ chuỗi nếu tôi không phải.

Bạn có thể sử dụng getComputedStyle().

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

jsFiddle .

Thuộc tính Element.style cho phép bạn chỉ biết các thuộc tính CSS được xác định là nội tuyến trong phần tử đó (theo chương trình hoặc được xác định trong thuộc tính kiểu của phần tử), bạn sẽ có được kiểu tính toán.

Không dễ để thực hiện theo cách đa trình duyệt, IE có cách riêng của mình, thông qua thuộc tính Element.civerseStyle và cách tiêu chuẩn DOM Cấp 2, được các trình duyệt khác triển khai là thông qua phương thức document.defaultView.getComputingStyle.

Hai cách có sự khác biệt, ví dụ, thuộc tính IE Element.civerseStyle mong đợi rằng bạn truy cập vào tên thuộc tính CSS gồm hai hoặc nhiều từ trong camelCase (ví dụ: maxHeight, fontSize, backgroundColor, v.v.), cách tiêu chuẩn mong đợi các thuộc tính với các từ được phân tách bằng dấu gạch ngang (ví dụ: chiều cao tối đa, cỡ chữ, màu nền, v.v.). ......

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

Luồng ngăn xếp tham chiếu chính

Sử dụng như sau. Nó đã giúp đỡ tôi.

document.getElementById('image_1').offsetTop

Xem thêm Nhận kiểu .

Giải pháp trình duyệt chéo để kiểm tra các giá trị CSS mà không cần thao tác 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];
   }
  }
 }
};

Sử dụng:

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

Phiên bản khử trùng (buộc đầu vào bộ chọn thành chữ thường và cho phép sử dụng mà không cần dẫn ".")

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

Nếu bạn đặt nó theo chương trình, bạn có thể gọi nó như một biến (tức là document.getElementById('image_1').style.top). Mặt khác, bạn luôn có thể sử dụng 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>

Nếu bạn vào thư viện, tại sao không phải MyL Library và getStyle .

Phương thức css của jQuery được đặt tên sai, CSS chỉ là một cách thiết lập kiểu và không nhất thiết phải biểu thị các giá trị thực của các thuộc tính kiểu của phần tử.

Năm 2020

kiểm tra trước khi sử dụng

Bạn có thể sử dụng computeStyleMap ()

Câu trả lời là hợp lệ nhưng đôi khi bạn cần kiểm tra đơn vị nào trả về, bạn có thể nhận được đơn vị đó mà không cần bất kỳ slice()hoặc substring()chuỗi nào.

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>

Để đảm bảo an toàn, bạn có thể muốn kiểm tra xem phần tử có tồn tại trước khi bạn cố đọc từ nó không. Nếu nó không tồn tại, mã của bạn sẽ đưa ra một ngoại lệ, điều này sẽ dừng thực thi trên phần còn lại của JavaScript và có khả năng hiển thị thông báo lỗi cho người dùng - không tốt. Bạn muốn có thể thất bại một cách duyên dáng.

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
}

Giải pháp trình duyệt chéo không có thao tác DOM được đưa ra ở trên không hoạt động vì nó đưa ra quy tắc khớp đầu tiên, không phải quy tắc cuối cùng. Quy tắc kết hợp cuối cùng là quy tắc áp dụng. Đây là một phiên bản làm việc:

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

Tuy nhiên, tìm kiếm đơn giản này sẽ không hoạt động trong trường hợp bộ chọn phức tạp.