javascript - 使用 javascript 访问 CSS 类

Question

如何访问使用外部或嵌入式样式表指定的元素的样式声明。例如：如何使用 id 选择器访问在嵌入式样式表中定义的元素的宽度属性。我知道 CSSRules 对象可以做到这一点。 ..但它依赖于浏览器。例如：在 chrome 中，对象为 null ......那么独立于浏览器的方法是什么？

Answer 1

这是 IE9 之前的 IE 和所有其他浏览器的做法不同的情况。要获取对象的当前样式，包括从样式表应用于对象的任何内容，您可以使用如下内容：

function getStyle(el, cssprop) {
    if (document.defaultView && document.defaultView.getComputedStyle)
        return document.defaultView.getComputedStyle(el, null)[cssprop];
    else //IE
        return el.currentStyle[cssprop];
}

Answer 2

这真的取决于浏览器......我有一些代码用于制作自动扩展文本区域，改编自那里找到的代码。

注意，$这里的函数来自Prototype。

function getStyleFromCss(el, style) {
    /* Hack required by IE */
    var value = $(el).getStyle(style);
    if (!value) {
        /* For other browsers. Actually this equals 'window'. Use that
         *  if Opera fails on you. */
        if(document.defaultView) {
            value = document.defaultView.getComputedStyle(el, null).
                getPropertyValue(style);
            // for IE
        } else if(el.currentStyle) {
            value = el.currentStyle[style];
        }
    }
    if(value.length > 0){
        /* if the value returned has the word px in it, we check for
         *  the letter x */
        if (value.charAt(value.length-1) == "x") {
            value = parseInt(value.substring(0, value.length-2));
        }
    }
    return value;
}

Prototype 中的getStyle()函数是这样定义的，您应该能够轻松地使其适应您的需求。

getStyle: function(element, style) {
  element = $(element);
  style = style == 'float' ? 'cssFloat' : style.camelize();
  var value = element.style[style];
  if (!value || value == 'auto') {
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css[style] : null;
  }
  if (style == 'opacity') return value ? parseFloat(value) : 1.0;
  return value == 'auto' ? null : value;
},