style currentStyle getComputedStyle的区别和用法

最新推荐文章于 2018-07-18 17:41:49 发布
最新推荐文章于 2018-07-18 17:41:49 发布
阅读量424 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happyYYhy/article/details/60135086
版权

style属性获取样式值，使用方法：obj.style.attr

style只能获取元素的内联样式，内部样式和外部样式使用style都获取不到。

currentStyle和getComputedStyle方法既可以获取内联样式，也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器，getComputedStyle适用于Firefox、Opera、Safari、Chrome浏览器。

getComputedStyle、currentStyle和style的区别是:

getComputedStyle和currentStyle只能获取属性值，无法设置属性。如果想设置属性值，可是使用ob.style.attr.




happyyyhy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取元素CSS值之getComputedStyle方法熟悉
精彩人生
05-21 1501
一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。 jQuery
JavaScript--currentStyle和getComputedStyle()的区别和联系
最新发布
m0_74293254的博客
07-12 378
需要注意的是，无论是currentStyle还是getComputedStyle()返回的样式值都是字符串形式，如果需要获取具体的数值，可以使用相关的方法进行转换（例如parseInt()）。该函数接受两个参数：element代表要获取样式的元素，styleProperty代表要获取的样式属性。JavaScript中的currentStyle和getComputedStyle()都是用于获取元素的计算样式属性的方法，但它们适用于不同的情况。它用于获取指定元素的当前样式，返回的是一个样式属性对象。
论style、getComputedStyle、currentStyle之间的区别和联系
RENYZHI的博客
11-10 1958
今天同事问我一个问题，希望能够获取到CSS样式中背景图的URL地址，我听到之后的第一反应就是style来获取，但是在实践的过程中遇到了一些问题。 我们在CSS中设置了背景图片，但是发现并没有办法使用JS的style来获取到。这个时候，我们应该选择其他的方式。特此，写一篇文章来记录一下整个思考和解决的过程。 之前一直在新浪博客上去写自己的技术博客，但是发现貌似没有几个人看，也可能是因为我更新的太慢了。
getComputedStyle与currentStyle获取样式(style/class)
09-05
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了，感兴趣的朋友可以了解下
js用currentStyle和getComputedStyle获取css样式（非行间）
热门推荐
cui_angel的专栏
07-31 2万+
用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。下面是一个小示例： js用currentStyle和getComputedStyle获取css样式 #div1{width:100px; height:100px; backgr
前端学习笔记style，currentStyle，getComputedStyle的用法与区别
09-02
在前端开发中，理解和掌握`style`、`currentStyle`以及`getComputedStyle`的用法与区别至关重要。这些属性和方法允许我们在JavaScript中动态获取和修改元素的样式，从而实现丰富的用户界面交互。 首先，我们要了解...
style、 currentStyle、 runtimeStyle区别分析
09-05
在跨浏览器的JavaScript开发中，通常会使用标准的 `getComputedStyle` 方法（在非IE浏览器中）来代替 `currentStyle`。理解和掌握这三个属性的差异对于动态调整网页样式和解决样式优先级问题至关重要。
原生js获取left值和top值的三种方法
10-19
但这种方法的局限性在于，它只能获取到元素的行内样式（即`style`属性中定义的`left`和`top`），无法获取到`<style>`标签或者外部CSS文件中定义的样式。 ### 第二种方法：使用`getComputedStyle` 这种方法更为全面...
JavaScript获取css行间样式,内连样式和外链样式的简单方法
10-21
总结，JavaScript获取CSS样式的方式主要有三种：行间样式直接通过`element.style`获取，内联样式通过`getComputedStyle`或`currentStyle`，而外链样式则通过`document.styleSheets`和`cssRules`。在编写代码时，考虑...
getComputedStyle方法与currentStyle属性获取元素样式
xiaowei的博客
08-10 1242
1、getComputedStylegetComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值（计算之后的最终结果，如2em计算后的结果。此外，即使没有CSS代码，也会把默认的祖宗八代都显示出来）。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。/* 语法 */ var style = window.getComputedSty
js中currentStyle和getComputedStyle获取css样式区别
Medlen
02-26 4935
js中获取样式我了解到三种。一种是通过obj.offsetAttr来获取样式，通过这种方法来获取元素的宽高时，如果没有边框，可以正确获取，如果使用边框属性则会出现问题，为了解决这个问题，可以使用另一种方法，通过getComputedStyle属性来获取css样式（非行间）。还有一种是通style属性来获取css样式（行间）。 先看代码： &lt;!DOCTYPE html&gt; &l...
js-style，currentStyle与getComputedStyle()
至尊宝
05-03 2168
一，区别style专指行间样式，即标签带style属性，例如： <script> window.onload=function(){ var oDiv=document.getElementById("div1"); //alert("行间样式测试："+oDiv.style.backgroundColor);
JavaScript之Style对象与CurrentStyle对象
笺赕
07-18 2万+
1、Style对象 style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。 例子： &lt;style type="text/css"&gt;#div{color:gray;}&lt;/div&gt;//内部样式 &lt;div id="div" style="color:red;"&gt;&l
currentStyle、getComputedStyle
fendouzhe123的专栏
05-18 646
周末写了个原生的animation组件，其中使用原生的document.getElementByIdx_x('...').style来获取元素的相关样式值，但是奇怪的是获取不到相应的值： body{margin:0 auto;text-align:center;} div{position:relative;left:10px;} var dom1 = doc
js中style,currentStyle和getComputedStyle的区别
农村的我的专栏
11-09 1098
周末写了个原生的animation组件，其中使用原生的document.getElementByIdx_x_x('...').style来获取元素的相关样式值，但是奇怪的是获取不到相应的值： body{margin:0 auto;text-align:center;} div{position:relative;left:10px;} var dom1 =
currentStyle与getComputedStyle的用法
biaoboke的博客
11-14 797
在JavaScript中style只能获取元素的内联样式，内部样式和外部样式style是无法获取的。 js获取内部样式和外部样式使用getComputedStyle 和currentStyle。 IE下获取元素的实际属性使用currentStyle属性，getComputedStyle属性与currentStyle属性在作用上是相同的，都是获取内部样式或者外部样式。 两种方法的区别： ge
js获取css值的方法：style、getComputedStyle和currentStyle
lzding的博客
06-01 1万+
JS 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等。区别在于： （1）style 只能获取行间样式，但能设置样式。 （2）getComputedStyle 和 currentStyle 能够获取 行间样式/非行间样式/浏览器默认样式，但存在浏览器兼容问题，且不能设置样式。 一、element.style 获取行间样式，以及设
getComputedStyle与currentStyle
weixin_34234829的博客
02-14 57
currentStyle：获取计算后的样式。也叫当前样式、终于样式。 长处：能够获取元素的终于样式。包含浏览器的默认值，而不像style仅仅能获取行间样式。所以更经常使用到。 注意：不能获取复合样式如background属性值。仅仅能获取单一样式如background-color等。 alert (oAbc.currentStyle); 很遗憾的是，这个好使的东西也不能...
ts中使用currentStyle
05-24
请注意，使用 `currentStyle` 属性需要将元素强制转换为 `HTMLElement` 类型，因为 TypeScript 默认情况下认为元素只有基本的 HTML 元素属性和方法。此外，`currentStyle` 属性返回的是一个 CSSStyleDeclaration ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值