获取元素属性值,用getComputedStyle和currentStyle

在JS中,用 ele.style.attr 只能设置元素属性(有单位),不能获取。如果要获取需要用 getComputedStyle 和 currentStyle。

getComputerStyle使用于FF浏览器,currentStyle使用与IE浏览器。

代码示例:

HTML代码:

<div id="d1"></div>

CSS代码:

#d1{width:100px;}

JS代码:

function getStyle(ele){

        return ele.currentStyle?ele.currentStyle:window.getComputedStyle(ele,null);

}

var d1=document.getElementById("d1");

var wid=getStyle(d1).width;

console.log(wid);    //100px

在JavaScript中,可以使用多种方法来获取元素的CSS属性值。以下是几种常用的方法: 1. **使用`window.getComputedStyle`方法**: 该方法返回一个对象,包含元素的计算样式,包括所有CSS属性值。 ```javascript // 获取元素 var element = document.getElementById('myElement'); // 获取计算样式 var style = window.getComputedStyle(element); // 获取特定属性值 var width = style.getPropertyValue('width'); console.log(width); ``` 2. **使用`element.style`属性**: 该属性只返回元素的内联样式,不包括从外部样式表或内部样式表中继承的样式。 ```javascript // 获取元素 var element = document.getElementById('myElement'); // 获取内联样式 var width = element.style.width; console.log(width); ``` 3. **使用`currentStyle`属性**(仅适用于IE浏览器): 该属性与`window.getComputedStyle`类似,但仅在IE浏览器中有效。 ```javascript // 获取元素 var element = document.getElementById('myElement'); // 获取计算样式(IE) var style = element.currentStyle; // 获取特定属性值 var width = style.width; console.log(width); ``` 4. **使用`getAttribute`方法**: 该方法可以获取元素的指定属性值。 ```javascript // 获取元素 var element = document.getElementById('myElement'); // 获取属性值 var width = element.getAttribute('style').split('width: ')[1].split(';')[0]; console.log(width); ``` 这些方法各有优缺点,`window.getComputedStyle`是最常用且兼容性最好的方法,可以获取元素的计算样式,而`element.style`只能获取内联样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值