style、currentStyle、getComputedStyle的应用

来源：互联网发布：电脑录音软件编辑：程序博客网时间：2024/05/16 12:17

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>style,currentStyle,getComputedStyle</title><style type="text/css">#div1 {background-color: #f60;width: 400px;height: 200px;margin: 0 auto;}</style><link rel="stylesheet" href="t.css"></head><body><div id="div1" style="padding:5px;color:#fff"></div><script type="text/javascript">function css(obj, attr) {if (obj.currentStyle) {//只在IE下有效,无论是元素的内联样式、外部样式，内部样式下都有效return alert("IE " + obj.currentStyle[attr]);} else {//2种情况：1：访问元素的内联样式，FF下没效果，chrome下有效果。//        2：访问内部样式和外部样式时，FF,chrome下有效果。return alert("FF,Chrome " + getComputedStyle(obj, false)[attr]);//2种情况:1:在访问元素的内联样式时，在IE,FF,chrome下均有效（返回颜色时返回的是rgb格式）// 2：在访问内部样式和外部样式时，会弹出窗口但不会有结果，在IE,FF,chrome下一样的情况//return alert("元素的内链样式："+obj.style[attr]);}}css(div1, "width");</script></body></html>

t.css

#div1{cursor: pointer;}

这三种方法在浏览器兼容性方面相互互补，在元素访问的权限上主要体现在obj.style上。

0 0