浅谈style.,currentStyle,getComputedStyle,getAttribute

最新推荐文章于 2020-07-23 14:30:06 发布
最新推荐文章于 2020-07-23 14:30:06 发布
阅读量819 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_fzz/article/details/53099349
版权

xxx为属性.
ele为元素.

1.style.

在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,用它来取值的话，它只能取到内联样式.
今天有另外发现,ele.style.display可以被获取到!–2016.11.10

2.currentStyle

这是ie用来获取样式的方法,通常这样使用:ele.currentStyle.xxx;

3.getComputedStyle

除了ie貌似都支持,使用方法:getComputedStyle(ele,false)[xxx];这里出现false的原因是getComputedStyle可以获取伪元素,如果想获取伪元素的 话，将false替换掉即可.

4.getAttribute

ele.getAttribute()可以获取元素中的内联属性,并且可以获得自定义的属性.

mr_fzz
关注
专栏目录
用代码说明height, clientHeight, offsetHeight, scrollHeight 区别 及 为什么height值有时取不到
ForMyQianDuan的博客
11-30 1445
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 {
原生js获取元素样式的简单方法
10-21
本文将介绍使用原生JavaScript来获取元素样式的方法，这种方法主要分为几种：使用ele.style属性、getComputedStyle方法、currentStyle属性以及getPropertyValue方法。 首先，ele.style属性是最直接获取样式的方式，...
gerAttriBute和getcomputedStyle()区别
HWSss的博客
07-23 274
元素.gerAttriBute(“属性”) 获取的是行内属性 window.getComputedStyle(选择器).属性 可以获取的到css样式表的属性 兼容IE8以上 window.getComputedStyle(box,“after”).属性 获取伪元素的属性 window.getComputedStyle(box).borderBottom 获取连字符的属性 使用驼峰时命名 ...
js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？
xlei1123的博客
12-31 1452
著作权归作者所有。 商业转载请联系作者获得授权，非商业转载请注明出处。 作者：alaki 链接：https://www.zhihu.com/question/38750336/answer/78416508 来源：知乎 有区别 首先区分property和attribute，两个翻译成中文都可以作为属性，但是在实际上是有区别的。 在html标签里的自定义属性称为proper
getComputedStyle方法与currentStyle属性获取元素样式
xiaowei的博客
08-10 1259
1、getComputedStylegetComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值（计算之后的最终结果，如2em计算后的结果。此外，即使没有CSS代码，也会把默认的祖宗八代都显示出来）。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。/* 语法 */ var style = window.getComputedSty
获取元素CSS值之getComputedStyle方法熟悉
DreamFJ的博客
09-13 385
获取元素CSS值之getComputedStyle方法熟悉  封装获取最终应用在元素CSS属性上的值：
JavaScript中获取样式的原生方法小结
10-25
1. `element.style`： 这个方法主要用于获取元素直接在HTML标签内通过`style`属性设置的样式值，例如`<div id="ele" style="color: red;"></div>`。它无法获取到外部CSS文件或内联`<style>`标签中定义的样式。例如...
IE和Firefox之间在JavaScript语法上的差异
10-22
在JavaScript中，获取或设置CSS属性时，通常使用`object.style.property`的形式。然而，由于`float`在JavaScript中是保留关键字，因此不能直接用`object.style.float`。IE使用`styleFloat`，而Firefox则使用`css...
IE与Firefox在JavaScript上的7个不同写法小结
10-29
然而，CSS属性中的"float"在JavaScript中是一个保留关键字，不能直接使用element.style.float来访问。在IE浏览器中，需要使用element.style.styleFloat来设置float属性： ```javascript document.getElementById(...
javascript中style,currentStyle和getComputedStyle的用法
浮生途的博客
04-24 271
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获取外部的样式存在兼容性的问题,所以后面我还会教大家解决兼容性的方法. style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值 写法:el...
JS获取元素样式之style、currentStyle、getComputedStyle
安歌
09-07 4248
在js中获取元素的样式属性大多都是用ele.style.attr这种方式，但是这种方式是有局限性的，该方法只能获取到行内样式，获取不了外部样式。 如果要想获取元素的外部样式，可以选用currentStyle属性和getComputedStyle属性，但这两个属性不能设置样式,只能获取样式，而且这两个属性有其兼容性，具体来说： currentStyle属性 用法：ele.currentStyl...
js中获取css中的样式方法：style，currentStyle，getComputedStyle
binhongchang的博客
07-11 249
用js来获取或者设置css相关样式，是很常见的需求，下面将对比一下js中的各个方法； 1，style var obj = document.getElementById('box'); console.log(obj.style.width); obj.style.width = '50px'; ele.style[attr] ele.style.attr ...
getComputedStyle方法的那些事
weixin_33754913的博客
05-26 654
一、getComputedStyle是？getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 getComputedStyle() gives the final used values of all the C...
JS获取外部的样式：currentStyle属性和getComputedStyle属性 .JQ的attr（）及prop()
The limits of your knowledge are the limits of your world
03-27 594
currentStyle属性和getComputedStyle属性不能设置属性,只能获取 1.兼容IE,不兼容火狐和谷歌 语法：ele.currentStyle[“attr”]或者ele.currentStyle.attr; 2.getComputedStyle:该属性是兼容火狐谷歌,不兼容IE 语法：window.getComputedStyle(ele,null)[attr]获取是window...
获取元素属性值，用getComputedStyle和currentStyle
半亩云烟
06-08 1027
在JS中，用 ele.style.attr 只能设置元素属性(有单位)，不能设置。如果要设置需要用 getComputedStyle 和 currentStyle。 getComputerStyle使用于FF浏览器。 代码示例： HTML代码： CSS代码： #d1{width:100px;} JS代码： function getStyle(ele){
getAttribute和setAttribute设置style的兼容问题
Focus-Fe
10-10 1049
其实前面写过一篇“获取和设置目标元素的属性值”的，本文补充说明一下里面的兼容性问题：   先抛结论：     IE6-7在使用getAttribute或者setAttribute，不能直接操作样式 举例： &lt;div id="test" style="height:200px;width:100px;border:1px solid red;"&gt;&lt;/...
CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute
weixin_30851867的博客
12-11 178
js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE：currentStyle,getAttribute 前言 jquery 中的 css() 方法，其底层运用的就是getComputedStyle，getPropertyValue 方法。 getComputedStyle getComput...
function getStyleAttr(obj,ele){ if(obj.currentStyle){ return parseInt(obj.currentStyle[ele]) ; }else{ return parseInt(window.getComputedStyle(obj,null)[ele]) ; } }
最新发布
07-15
如果浏览器不支持currentStyle属性，则使用window.getComputedStyle(obj,null)[ele]来获取样式属性值，并同样使用parseInt函数将其转换为整数型返回。 请注意，这个函数假设样式属性值都是整数型，如果要获取非整数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值