JS中的document.getComputedStyle和document.getcurrentStyle

最新推荐文章于 2022-12-12 11:52:37 发布

啊啾同学

最新推荐文章于 2022-12-12 11:52:37 发布

阅读量563

点赞数

本文链接：https://blog.csdn.net/weixin_45822952/article/details/105744789

版权

我们都知道css里面的样式分为三类

内部样式

写在html页面里面的，只对所在的网页有效。

外部样式

通过建立一个外部的css来引入的，可以供多个网页使用。

行间样式

这是写在标签里面的，只对改标签起作用。

再来说说JS里面的getComputerStyle和getcurrentStyle方法吧

getComputerStyle

它是一个可以获取到当前元素最终所使用的css属性值，返回的是一个css样式声明对象，只读。

getcurrentStyle

它是针对IE浏览器的一个属性

基础知识

最基础的方式去获取元素的样式这么写：

document.getElementById('element').style.xxx可以获取element的xxx样式信息。

但是他只获取dom元素的内嵌（行间）样式，对于内部样式和外部样式就获取不到样式信息了。

DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式信息。

例如：

getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。

但是这个方法不支持IE浏览器。

在IE中获取元素的样式用到的是currentStyle。obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;

在ie浏览器中，obj.currentStyle是一个对象，而在非ie浏览器中则显示的是undefined，所以可以用以上方法来处理兼容性的问题！！
（判断obj.currentStyle为真时，执行ie的currentStyle方法；判断obj.currentStyle为假时，执行getComputedStyle(obj,null)方法

特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制值，如:#ffffff，而其他浏览器返回的是rgb值，如:rgb(255,255,255)。

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}
    </style>

</head>
<body>
    <div id="div1"></div>
    <input  type='button' value='yangshi'id='btn'>
</body>  
  <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var btn=document.getElementById('btn');
            btn.onclick=function(){
if(oDiv.currentStyle){
    alert(oDiv.current.window);
}else{
    alert(getComputedStyle(oDiv).width);
}

            }
        }
    </script>
</html>

综合例子

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background-color: red；
　　　　}
　　</style>
　　<script>
　　　　function get(obj,arr){　　//传入2个参数，用于获取需要修改的元素(例如：div)，和获取需要修改的样式
　　　　　　//运用上个代码②的封装，get函数，用于获取div的css样式
　　　　　　if(obj.currentStyle){
　　　　　　　　return obj.currentStyle[arr];
　　　　　　}
　　　　　　else{
　　　　　　　　return getComputedStyle(obj)[arr];
　　　　　　}
　　　　}
　　　　function css(obj,arr,value){　　//传入3个参数，用于获取需要修改的元素(例如：div)，获取需要修改的样式，和需要修改的样式的值
　　　　　　//自定义css函数，用于处理div的css样式变化
 
　　　　　　if(arguments.length==2){
　　　　　　　　//当css函数的参数为2个时，调用get函数，输出div中的css样式
　　　　　　　　alert(get(obj,arr));
　　　　　　}
　　　　　　else if(arguments.length==3){
　　　　　　　　//当css函数的参数为3个时，执行下面代码，修改div中的css样式
　　　　　　　　obj.style[arr]=value;
　　　　　　}
　　　　}

　　　　window.onload=function(){
　　　　　　var oDiv=document.getElementById('div1');
　　　　　　var btn=document.getElementById('btn');

　　　　　　btn.onclick=function(){
　　　　　　　　//调用css函数方法
　　　　　　　　css(oDiv,'backgroundColor')
　　　　　　　　css(oDiv,'backgroundColor','green')
　　　　　　}
　　　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>

最后注明：

getComputedStyle:FireFox、Opera、Safari、Chrome均支持。
currentStyle:仅IE支持。

感谢你的阅读。

啊啾同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的document.getComputedStyle和document.getcurrentStyle

我们都知道css里面的样式分为三类内部样式写在html页面里面的，只对所在的网页有效。外部样式通过建立一个外部的css来引入的，可以供多个网页使用。行间样式这是写在标签里面的，只对改标签起作用。再来说说JS里面的getComputerStyle和getcurrentStyle方法吧getComputerStyle它是一个可以获取到当前元素最终所使用的css...
复制链接

扫一扫