您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在javascript中获取HTML元素的样式值?

如何在javascript中获取HTML元素的样式值?

element.style属性仅让您知道在该元素中定义为内联的CSS属性(以编程方式或在元素的style属性中定义),应该获取计算出的style。

以跨浏览器的方式进行操作并非易事,IE通过该element.currentStyle属性具有自己的方式,而其他浏览器通过该方法实现的DOM Level 2 标准 方式document.defaultView.getComputedStyle

这两种方法有差异,例如,在IE element.currentStyle属性期待您访问的两个或多个单词组成的CCS属性名 驼峰 (例如maxHeightfontSizebackgroundColor等),标准的方式希望与字词的属性与破折号分开(例如max- heightfont-sizebackground-color,等等)。

同样,IE element.currentStyle将以指定的单位返回所有尺寸(例如12pt,50%,5em),标准方式将始终以像素为单位计算实际尺寸。

我前段时间做了一个跨浏览器功能,该功能允许您以跨浏览器的方式获取计算的样式:

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上,它们将按定义返回它们。

我目前正在撰写有关该主题文章,您可以在此处跟随我对此功能所做的更改。

javascript 2022/1/1 18:18:08 有442人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶