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.
随机推荐
- SQL Server 数据库索引
原文:SQL Server 数据库索引 一.什么是索引 减少磁盘I/O和逻辑读次数的最佳方法之一就是使用[索引] 索引允许SQL Server在表中查找数据而不需要扫描整个表. 1.1.索引的好处: ...
- tomcatserver解析（六）-- Acceptor
Acceptor负责用来管理连接到tomcatserver的数量,来看看Acceptor在tomcatserver中的应用,是怎样实现连接管理的,socket连接建立成功之后,是怎样实现内容的读写的( ...
- Android APK反编译详解（非常有用）
如何学习最快呢?无疑是通过研究别人的源代码? 但是,获取别人的源代码,比较困难.本文,仅限于用于学习开发. 这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而得到源代码吧 ...
- Android开发系列（十九个）：至SimpleAdapter设置样式
Adapter任务:在数据adapter处理后做.展会上的观点 对于一般ArrayAdapter供.传递给ArrayAdapter之后就能够在视图上用一个列表显示出这个字符串数组. 比例如以下边的代码 ...
- （一个）AngularJS获取贴纸Hello World
一旦项目使用JQuery原创javascript,最近参加了一个项目,需要使用AngularJS.RequireJS比较框架,如汰渍.这里写一些博客,记录自己的学习过程,虽然冠以原来的名字,实际上都是 ...
- Linux内核分析（六）----字符设备控制方法实现|揭秘系统调用本质
原文:Linux内核分析(六)----字符设备控制方法实现|揭秘系统调用本质 Linux内核分析(六) 昨天我们对字符设备进行了初步的了解,并且实现了简单的字符设备驱动,今天我们继续对字符设备的某些方 ...
- Android Volley 之自己定义Request
转载标明出处:http://blog.csdn.net/lmj623565791/article/details/24589837 今天群里一哥们须要自己定义Volley的Request的样例,于是产 ...
- IIS ASP.NET 版本转换批处理代码
原文 IIS ASP.NET 版本转换批处理代码 用来转换asp.net版本的代码,需要的朋友可以参考下. 标识符的查看方法:iisaspnet.bat代码 复制代码代码如下: @echo off e ...
- C编程的指针涛 ---第十笔记
//指针实例搜索算法 //迷宫算法 //搜索是最长的使用深度优先搜索和广度优先搜索 //作为名称作为一个深度优先搜索,每路一直在寻找到底. //为了防止想法,这样的数据结构 //使得每次找到思路的时候 ...
- 1006-HBase操作实战（JAVA API状态）
一.准备阶段 开发环境: hadoop: hadoop -2.4.0 hbase: hbase -0.94.11-security eclipse:Juno Service Release 2 二.创 ...