JS获取外部的样式：currentStyle属性和getComputedStyle属性 .JQ的attr（）及prop()

最新推荐文章于 2021-07-09 11:00:49 发布

原创最新推荐文章于 2021-07-09 11:00:49 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用currentStyle属性和getComputedStyle属性获取元素的样式。currentStyle兼容IE但不兼容火狐和谷歌，而getComputedStyle则相反。同时，文章还探讨了jQuery中attr方法的使用，并对比了attr与prop的区别。

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

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

1.兼容IE,不兼容火狐和谷歌
语法：ele.currentStyle[“attr”]或者ele.currentStyle.attr;

2.getComputedStyle:该属性是兼容火狐谷歌,不兼容IE
语法：window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr

兼容写法：

var div=document.getElementsByTagName("div")[0];

        console.log(getStyle(div,"background-color"));
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }

获取行间样式： JQ attr:
实例
改变图像的 width 属性：

$("button").click(function(){
  $("img").attr("width","180");
});

定义和用法
attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

返回属性值
返回被选元素的属性值。

语法
$(selector).attr(attribute)
参数描述
attribute 规定要获取其值的属性。
设置属性/值
设置被选元素的属性和值。

语法
$(selector).attr(attribute,value)
参数描述

attribute 规定属性的名称。
value 规定属性的值。
使用函数来设置属性/值
设置被选元素的属性和值。

语法
$(selector).attr(attribute,function(index,oldvalue))
参数描述
attribute 规定属性的名称。
function(index,oldvalue)
规定返回属性值的函数。

该函数可接收并使用选择器的 index 值和当前属性值。

对比attr方法的 prop()

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()