style、currentStyle、getComputeStylel的使用
（1）js中使用obj.style的用法，是为了获得内联样式，即style属性中的值。
如果想获取obj.style.display，但内联样式表中没有定义display，那么将返回一个空的字符串。
（2）使用obj.currentStyle则是为了获得外部（即通过<link>引入）和内部（即<style>中定义)的样式表中的值。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：内嵌样式、样式表规则、HTML 标签属性、HTML 标签的内部定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#text{
width: 200px;
height: 30px;
}
</style>
<script type="text/javascript">
function objClick(obj){
alert(obj.style.width);
alert(obj.currentStyle.height);
}
</script>
</head>
<body>
<div>
<input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
</div>
</body>
</html>
注意：只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式，其他浏览器中不支持。ps:由于忽略了这个条件，一直在chrome下调试，怎么都不起作用，所以浏览器的兼容性，一定要切记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#text{
width: 200px;
height: 30px;
}
</style>
<script type="text/javascript">
function objClick(obj){
alert(window.getComputedStyle(obj,null).getPropertyValue("width"));
alert(window.getComputedStyle(obj,null).getPropertyCSSValue("width").cssText);
}
</script>
</head>
<body>
<div>
<input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
</div>
</body>
</html>
经测试：第一种方法，在IE和chrome中通用，第二种，IE下不支持。
style、currentStyle、getComputeStylel的使用的更多相关文章
- JavaScript中style, currentStyle和 getComputedStyle的异同
今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...
- js中style,currentStyle和getComputedStyle的区别
1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...
- 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- style currentStyle getComputedStyle的区别和用法
先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- 浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...
- 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- style,currentStyle和getComputedStyle的区别
样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...
- 关于对象.style currentstyle 的区别
对象.style的方式只能获取行内写法的样式,但是外部引入的或者写在head里面的就无法获取,只能用currentstyle.
随机推荐
- COC+RTS+MOR游戏开发 一（游戏特色分析，和实践）
本场比赛的临时名称 游戏特色(-):COC风格 ,塔防养成类游戏. 一款史诗般的战斗策略游戏.玩家须要建立村庄,成千上万的网友训练玩家的军队和战斗. 游戏中玩家须要不断的提高军队的作 ...
- 揭秘上海传智播客平均工资超过7k
其中一位知情人士
大学毕业生人数破700万大关.如何破解"毕业即失业"中国式的大学困境? 2014年全国高校毕业生总数将达到727万人,比被称为"史上最难就业年"的2013年再添 ...
- 基于VMware的虚拟Linux集群搭建-lvs+keepalived
基于VMware的虚拟Linux集群搭建-lvs+keepalived 本文通过keepalived实现lvsserver的的双机热备和真实server之间的负载均衡.这方面的blog挺多,可是每一个 ...
- Entity Framework笔记（一）
最近在看MVC方面的资料,看了几个教程都在使用Entity Framework做数据持久化.之前也听说过这个东西,在微软的网站上看过一个演示视频,但都没怎么去仔细研究.MVC的东西太庞大了,先慢慢熟悉 ...
- InstallShield安装包中集成第三方安装包的方案选择
原文:InstallShield安装包中集成第三方安装包的方案选择[转] 我们在制作安装包时,有些情况下会涉及第三方安装的集成,这里将讨论如何调用安装第三方包,以及需要注意的事项. 第三方安装包的 ...
- WSHPSRS-匹克选择列表生成器-SRS（R12.2.3）
匹克选择列表生成器-SRS(R12.2.3) --US Program:Pick Selection List Generation - SRS Short Name:WSHPSRS Appli ...
- JavaEE(11) - 消息驱动EJB
1. MDB作为异步消费者的本质 2. MDB的运行机制 3. 使用@MessageDriven修饰MDB(需要messageListenerInterface) 4. 实现MessageListen ...
- Log4jdbc demo
package log4jdbc; import java.sql.Connection; import java.sql.PreparedStatement; import org.junit.Te ...
- hdu 4919 Exclusive or
Exclusive or Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) T ...
- HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作
http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/ 版权声明:本文博客原创文章,博客,未经同意,不得转载.