js获取css属性值的方法

js操作获取dom元素的样式属性值

obj.style: 它只能够获取通过style设置的元素CSS属性值：

在html标签内通过style设置行内属性
通过.dom.style.width="100px"这样类似设置。

无法获取定义在<style type="text/css">里面的属性,这时getComputedStyle()就可以发挥作用了，它可以获取到指定元素对应css属性的最终计算值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style type=”text/css”>.ss{color:#cdcdcd;}
</style>
</head>
<body>
<div id='css88' class='ss' style='width:200px; height:200px; background:#333333'>JS获取CSS属性值</div><script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color);//null
</script>
</body>
</html>

window.getComputedStyle(dom元素，【伪类】)，不兼容IE浏览器(obj.currentStyle)。

window.getComputedStyle(el)等价于 document.defaultView.getComputedStyle(el)

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的DOM元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个实时的CSSStyleDeclaration对象，包含当前元素的所有计算的样式。当元素的样式更改时，它会自动更新本身。

<!DOCTYPE html>
<html lang="en">
<head>
<title>计算元素样式</title>
<style>
#myDiv {width:100px;height:200px;
}
</style>
<body>
<div id ="myDiv" style=" border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”
</script>
</body>
</head>
</html></span>

下面这个函数，能够获取一个元素的任意 CSS 属性值。

    function  getStyle(element,attr){if(element.currentStyle){return element.currentStyle[attr]}else{return getComputedStyle(element).attr} }

js获取css属性值的方法相关推荐

php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
JS 获取标签属性值的方法
1.取值方法一自定义属性必须用getAttribute()方法 var iframeSrcAttr = document.getElementById("importJsp") ...
web自动化通过js获取class属性值
引言: 项目过程当中使用selenium的get_attribute获取元素属性一直不成功,一直返回True,此方法在别的系统都可以正常使用,一直没有弄明白原因 self.driver.find_el ...
原生JS获取元素属性值
方法一第一步我们要获取到元素(比如用ID),不可以是类数组(比如用class),类数组除了有一些数组的基本特征不可以使用其他方法,你会报错的第二步目标元素必须设置position为absolu ...
通过js获取css属性
1.通过dom.style.属性来获取但是这种方法无法获取id.class里的属性例子: <!DOCTYPE html> <html><head>< ...
css提取页面元素唯一性_下面这个函数，能够获取一个元素的任意 CSS 属性值。...
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
js获取css值的方法：style、getComputedStyle和currentStyle
JS 获取 html元素的样式有三种方式:style.getComputedStyle 和 currentStyle等.区别在于: (1)style 只能获取行间样式,但能设置样式. (2)getCo ...
getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值
object.getComputedStyle 获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. ...
原生Js通过class属性值获取对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

js获取css属性值的方法

js操作获取dom元素的样式属性值

js获取css属性值的方法相关推荐

最新文章

热门文章