javascript中获取非行间样式的方法
我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的，但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.attr获取就是一个空字符。
今天我们来介绍下要获取节点计算后的样式就是不一定写在行间样式的方法。
1：window.getComputedStyle(obj,false)['attr']方法
这是BOM（浏览器window对象）提供的方法 ，所以可以直接写成getComputedStyle(nodeObj,false)，省略前面的window对象,该方法有两个参数，第一个是要获取样式的节点对象；第二个可以写成任何的字符一般写成false或者null，这里最好是用false因为用null
IE9+会有问题；后面直接跟要获取的样式（写在方括号中）即可。这个方法的返回值为一个对象，为计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 var style=getComputedStyle(div,false)['width']; alert(style);
但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法
2：nodeObj.currentStyle['attr'];
node.currentStyle，该属性返回的也是是一个对象，也是计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成
var
style=div.currentStyle['width']; alert(style);
3:为了兼容性我们可以将其封装为一个函数，提供一个统一的获取计算后的样式方法如下：
html:
<body>
<div style="width:500px"></div>
</body>
css:
<style type="text/css">
body,*{margin: 0;padding: 0;}
div{width: 300px;height: 300px;background: blue;border: 10px solid #000;}
</style>
js:
<script
type="text/javascript">
window.onload=function(){
var div=document.getElementsByTagName("div")[0];
var style=getAttr(div,'width')
alert(style);
}
function getAttr(obj,attr){ //我们把它们封装为一个函数，注意了在全局下定义的函数的都会默认设置为window对象的方法，所以以后我们调用方法的时候就可以直接用然后省略前面的对象，当然了你这样var style=window.getAttr(div,'width');调用也是木有问题的。
var style;
if(obj.currentStyle){ //当有这个属性的时候currentStyle
style=obj.currentStyle[attr]; //兼容IE 我测试的是ie5+
}
else{
style=getComputedStyle(obj,false)[attr]; //主流浏览器
}
return style;
}
</script>
效果
javascript中获取非行间样式的方法的更多相关文章
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- JavaScript获取非行间样式/定义样式
html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...
- 获取非行间样式getComputedStyle
有如下代码: 1 2 3 div { width: 200px; } 1 2 3 <div id="aa" style="height: 100px;&qu ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
随机推荐
- textarea输入框限制字数（JS）
第一种: <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...
- maven打包异常：软件包com.sun.org.apache.xml.internal.security.utils.Base64 不存在
maven打包异常:软件包com.sun.org.apache.xml.internal.security.utils.Base64 不存在 将jre/lib/rt.jar添加到maven的compi ...
- C#:Winform技巧
1.如何设置winform窗体透明,但是显示的内容不透明? 方法:BackColor设置:Red(任意)在窗体属性里设置一个“TransparenceKey”的属性为Red 2.如何让C#编译不安全代 ...
- hbase 停止regionserver
每个regionserver节点可以自由启动或停止,可以不随hbase整体一起. 停止后regionserver上的数据会被移到其他regionserver上,不影响hbase的使用. 停止reg ...
- 利用反射及jdbc元数据实现通用的查询方法
---------------------------------------------------------------------------------------------------- ...
- Unity-Animator深入系列---状态机面板深入
回到 Animator深入系列总目录 本篇不讲解所有的面板功能,只是针对一些非常用功能进行介绍. 1.状态 1.1状态简介 简单的不做介绍了,需要特别注意: 1.Paramter勾选后可以指定参数控制 ...
- google prettify 代码高亮显示
引入js和css文件 下载地址 http://files.cnblogs.com/jaday/prettify.zip js文件代码 !function(){var q=null;window.PR_ ...
- for循环以及复杂if else 例题
for循环语句 例一. 请输入一个整数,求1加到这个整数的和 例二 请从1到100 以内和7 有关的数字 例三,请设计一个游戏,前20关每关的分数是本身,21到30 是10分每关.31到40是20分每 ...
- Android编译选项eng、user、userdebug的区别
eng:debug 版本 user: release 版本 userDebug版本:部分debug版本 LOCAL_MODULE_TAGS := user eng optional test这个样子. ...
- 取出ip address control的ip字符
1.给这个空间设置control型变量 m_add; 2.定义4个字节型变量,来获取控件中的4个ip字节 BYTE a,b,c,d: m_add.GetAddress(a,,b,c,d): 3.定义I ...