css文件中如何得到某个属性值:
一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,
返回的是一个CSS样式声明对象 , 只读, 此方法支持Firefox浏览器;
语法:var style=window.getComputedStyle(“元素”,“伪类”);第一个参数是必须的,第二个为可选的。
二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值,
利用element.CurrentStyle.attribute可获取
其与getComputedStyle区别:1、 currentStyle不支持伪类样式获取;
2、currentStyle不支持现代浏览器,支持IE
代码说明:
- <span style="font-size:14px;"><!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <style type="text/css">
- #div1{
- width:100px;height:100px;background: red;
- }
- </style>
- <body>
- <div id="div1"></div>
- </body>
- <script type="text/javascript">
- var oDiv = document.getElementById('div1');
- /*
- 只能获取,不能设置
- 获取到的是计算后的样式
- 最好不要获取复合样式
- 所获取的样式要设初使值
- 获取到的样式类型是字符串
- 别空格 [' width']
- *获取到的样式带px的
- transform 获取不到
- transition 不准确
- */
- function getStyle(obj,attr){
- if(obj.currentStyle){ //IE
- return obj.currentStyle[attr];
- }else{
- return getComputedStyle(obj,"伪类")[attr]; //Firefox
- }
- }
-
- alert(getStyle(oDiv1,'background'));</html></span>
然而在jQuery下直接使用$("element").css("属性","设置的值"),进行获取和修改。