栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

以跨浏览器的方式进行操作并非易事,IE通过该

element.currentStyle
属性具有自己的方式,而其他浏览器通过该方法实现的DOM Level
2 标准 方式
document.defaultView.getComputedStyle

这两种方法有差异,例如,在IE

element.currentStyle
属性期待您访问的两个或多个单词组成的CCS属性名 驼峰
(例如
maxHeight
fontSize
backgroundColor
等),标准的方式希望与字词的属性与破折号分开(例如
max-height
font-size
background-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上,它们将按定义返回它们。

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432233.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号