怎样在html里面获取样式,如何在javascript中获取HTML元素的样式值?

本文讲述了如何在不同浏览器环境下获取和处理CSS样式,包括内联style和DOMLevel2标准方法的差异,以及作者提供的一个用于实现跨浏览器风格计算的实用函数。讨论了IE特有的currentStyle属性与标准getComputedStyle方法的对比,以及可能遇到的问题和优化策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小编典典

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

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

2020-04-25

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值