使用javascript访问CSS类

我如何访问使用外部或嵌入式样式表指定的元素的样式声明.例如：如何使用id选择器访问在嵌入式样式表中定义的元素的width属性.
我知道CSSRules对象可以做到这一点…但是它取决于浏览器.对于ex：在chrome中,该对象为null …那么浏览器无关的方法是什么？

解决方法:

这实际上取决于浏览器…我有一些代码用来制作自动扩展文本区域,改编自发现的代码there.

注意,这里的$函数来自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;
},

标签：styles,stylesheet,css,javascript
来源： https://codeday.me/bug/20191101/1983309.html