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.
随机推荐
- C++ Primer笔记4_静态成员类_IO库
1.静态成员类 static成员变量与函数 static成员变量:必须在类外初始化.(const或引用类型变量必须在构造函数初始化列表里初始化) static成员函数: 不依赖于类.相当于类里的全局函 ...
- Team Foundation Server 2015使用教程--默认团队权限说明
- 不同版本的SQL Server之间数据导出导入的方法及性能比较
原文:不同版本的SQL Server之间数据导出导入的方法及性能比较 工作中有段时间常常涉及到不同版本的数据库间导出导入数据的问题,索性整理一下,并简单比较下性能,有所遗漏的方法也欢迎讨论.补充. 0 ...
- SQL开发中容易忽视的一些小地方(四)
原文:SQL开发中容易忽视的一些小地方(四) 本篇我想针对网上一些对于非聚集索引使用场合的某些说法进行一些更正. 下面引用下MSDN对于非聚集索引结构的描述. 非聚集索引结构: 1:非聚集索引与聚集索 ...
- vim cheat sheet
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE1Mjg5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- javascript小白学习指南0---1
引言: 做为一名程序猿.都是真心的想把自己的东西分享出来,供大家一起学习探讨.一起提高技能.一起涨工资,呵 这一系列的文章都是关于Javascript 基础的 当然文章其中穿插了些我自己的理解.希 ...
- Linux Kernel系列 - 黄牛X内核代码凝视
Hanks.Wang - 专注于操作系统与移动安全研究.Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhank ...
- java.util.Timer demo good
package timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; import org ...
- UVALive 5099 Nubulsa Expo 全球最小割 非网络流量 n^3
主题链接:点击打开链接 意甲冠军: 给定n个点m条无向边 源点S 以下m行给出无向边以及边的容量. 问: 找一个汇点,使得图的最大流最小. 输出最小的流量. 思路: 最大流=最小割. 所以题意就是找全 ...
- Nyoj 引水工程(最小生成树)
描述 南水北调工程是优化水资源配置.促进区域协调发展的基础性工程,是新中国成立以来投资额最大.涉及面最广的战略性工程,事关中华民族长远发展.“南水北调工程”,旨在缓解中国华北和西北地区水资源短缺的国家 ...