currentStyle、getComputedStyle 获取样式

style.height 获取的是行间的样式 currentStyle.height.getComputedStyle(elem,null).height 获取的是 div 的 content 的宽高, clientHeight 获取的是 content+padding, offsetHeight 获取的是content+padding+border. <script> window.onload = function(){ var div1 = document.getElementById…

style.attr,currentStyle,getComputedStyle获取元素css

老朋友object.style.attr 平常我们都是使用object.style.attr的方式来获取元素的属性, 但是这种方法具有很大的局限性——只能获取内联样式, 而下面的两种方法可以获取到元素的真实样式属性值,不管是不是内联样式 Window.getComputedStyle(element[, pseudoElt])参数element:指定元素:pseudoElt:可选,所匹配的伪元素该方法是获取元素的所有样式,并以对象的形式返回, 我们可以采用三种方式获取我们所需要的样式,具体看下面…

currentStyle&getComputedStyle获取属性

方法如下: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // IE 中的方法 }else{ return getComputedStyle(obj,false)[attr]; // 非IE 中的方法 } } 如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读!…

JS之获取样式

基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100…

getComputedStyle与currentStyle获取样式(style/class)

今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无法获取外部css文件中定义的样式,所以针对IE8以下以及其他浏览器,需要以这两种不同的方式获取外部css样式,即currentStyle和getComputedStyle. 下面这篇文章讲的不错,也比较好理解,言简意赅,在此推荐以下. 样式表有三种方式: 内嵌样式(inline Style) :是写…

getComputedStyle与currentStyle获取样式

转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式的网页里引用这个CSS文件 getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,返回的是一个CSS样式声明对象,只读cur…

style设置/获取样式的问题和 offsetWidth/offsetHeight的问题

style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样式 alert(oDiv.style.width) --当css写在样式表里(即css全部写在行外)的时候获取不到 --alert(oDiv.style.width)是错误的行内样式的优先级最高,当js通过style方法添加了样式之后,js再通过修改class的值为同一元素增加样式,最终行内样式优…

原生js获取样式

js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = element.style[property]; if(!value){ if(window.getComputedStyle) { //非IE value = window.getComputedStyle(element,null)[property]; } else if(element.cur…

利用原生JavaScript获取样式的方式小结

来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性 1: var ele = document.getElementById('ele'); 2: ele.style…

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo…

getstyle() 获取样式

问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示. 解决方案一:在元素的行内添加样式如 <div style="width=200px"> <div> 解决方案二:通过getstyle()方法获取样式 <script type="text/javascript"> //哪个元素 //哪个样式 function getStyle(obj, attr) { if(…

js如何获取样式？

在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style);如果我们写的是行内的样式,可以轻松通过这种方式来获得所需要的样式,不过,如果我们的样式是内联或者外联样式,就取不到了: <script type="text/javascript"> window.onload=function(){ //获取行间样式 var oDiv=doc…

getcomputedstyle()获取border像素差异问题

getComputedStyle()方法返回的是一个CSS样式声明对象--CSSStyleDeclaration对象(与style属性的类型相同),包含当前元素所有最终使用的CSS属性值: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myDiv { ba…

兼容的获取样式的函数getStyle()

想要得到某个元素的某个样式属性,可以用: <div id="div01" style="color:red">123</div> var ele = document.getElementById("div01"); console.log(ele.style.color); 但这样只能得到写在元素上的行内样式,对于link进来的样式文件或<style></style>中写的样式是获取不到的. 标准…

浅谈style.,currentStyle,getComputedStyle,getAttribute

xxx为属性. ele为元素. 1.style.是针对于样式在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今天有另外发现,ele.style.display可以被获取到!–2016.11.10 2.currentStyle是针对于样式这是ie用来获取样式的方法,通常这样使用:ele.currentStyle.xxx;可以获取内联和外联样式 3.getComputedStyle是针对于样式除了ie貌似都…

JavaScript获取样式值的几种方法学习总结

本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. style 用法:document.getElementById(“id”).style.property=”值”. 例子: <style> .yellow{height:200px;width:200px;background: yellow;} </style> </head&g…

JS获取样式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="te…

使用JavaScript获取样式的属性值

1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 . 在IE浏览器中,使用currentStyle来获取属性值语法格式为: HTML元素.currentStyle.样式属性: 3 . DOM提供了一个getComputedStyle()方法来获取属性值, Firefox,Opera,Safari,Chrome等浏览器支持(IE浏览器不支持) 语法格式: document.defaultView.ge…

js获取样式、currentStyle和getComputedStyle的兼容写法

currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. currentStyle 在ie.opera上是可行的,无法适用于所有浏览器的getComputedStyle( obj , false ) 是支持 w3c (FF12.chrome 14.safari):在FF新版本中只需要第…

js用currentStyle和getComputedStyle获取css样式（非行间）兼容ie与火狐

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是js代码. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name];…