如何在 javascript 中获取 HTML 元素的样式值? [英] How to get an HTML element's style values in javascript?

问题描述

我正在寻找一种方法来从具有样式标记设置的样式的元素中检索样式.

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag.

<style> 
#box {width: 100px;}
</style>

在身体

<div id="box"></div>

我正在寻找不使用库的直接 javascript.

I'm looking for straight javascript without the use of libraries.

我尝试了以下方法，但一直收到空白:

I tried the following, but keep receiving blanks:

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

我注意到，如果我使用 javascript 设置了样式，我只能使用上述内容，但无法使用样式标签.

I noticed that I'm only able to use the above if I have set the style using javascript, but unable to with the style tags.

推荐答案

element.style 属性让您只知道在该元素中定义为 inline 的 CSS 属性(以编程方式，或在元素的 style 属性中定义)，您应该获取计算样式.

The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.

跨浏览器的方式不是那么容易，IE有自己的方式，通过element.currentStyle属性，以及DOM Level 2 standard方式，其他浏览器是通过 document.defaultView.getComputedStyle 方法.

Is not so easy to do it in a cross-browser way, IE has its own way, through the element.currentStyle property, and the DOM Level 2 standard way, implemented by other browsers is through the document.defaultView.getComputedStyle method.

这两种方式是有区别的，比如IEelement.currentStyle 属性期望您访问由 camelCase 中的两个或多个单词组成的 CCS 属性名称(例如 maxHeight、fontSize、backgroundColor 等)，标准方式期望属性用破折号分隔的单词(例如 max-height、font-大小、背景色等).

The two ways have differences, for example, the IE element.currentStyle property expect that you access the CCS property names composed of two or more words in camelCase (e.g. maxHeight, fontSize, backgroundColor, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height, font-size, background-color, etc).

此外，IE element.currentStyle 将返回指定单位的所有尺寸，(例如 12pt, 50%, 5em)，标准方式将计算以像素为单位的实际尺寸总是.

Also, the IE element.currentStyle will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.

我前段时间做了一个跨浏览器的函数，可以让你以跨浏览器的方式获取计算的样式:

I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen 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;
  }
}

上述函数在某些情况下并不完美，例如对于颜色，标准方法将返回 rgb(...) 符号中的颜色，在 IE 上他们将返回它们原来的样子定义.

The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.

我目前正在撰写有关该主题的文章，您可以按照我对此功能所做的更改此处.

I'm currently working on an article in the subject, you can follow the changes I make to this function here.

这篇关于如何在 javascript 中获取 HTML 元素的样式值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！