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.
随机推荐
- HDU 1026 Ignatius and the Princess I 迷宫范围内的搜索剪枝问题
这个问题是一个典型的类型的问题迷宫广泛的搜索. 在网上看到了很多解决方案. 没什么解决问题的分析报告,不指出其中的关键点.代码更像是一大抄.一些分析师也有很大的文章分析.只是不要全部命中关键,什么是广 ...
- [Unity3D]Unity3D游戏开发3D选择场景中的对象，并显示轮廓效果强化版
大家好,我是秦培,欢迎关注我的博客,我的博客地址blog.csdn.net/qinyuanpei. 在上一篇文章中,我们通过自己定义着色器实现了一个简单的在3D游戏中选取.显示物体轮廓的实例. 在文章 ...
- sql server 2008如何导入mdf，ldf文件
sql server 2008怎样导入mdf,ldf文件 网上找了非常多解决sql server导入其它电脑拷过来的mdf文件,多数是不全.遇到的解决方法不一样等问题,下边是找到的解决这个问题的最 ...
- Different ways of associating known types in wcf
解释一下这个博客Known Types此属性标签,假设翻译的单词,所谓已知类型它.在服务契约中实现多态的行为.有四种方式实现,以下来分别演示一下. 1.User KnownType attribute ...
- 走向DBA[MSSQL篇] 详解游标
原文:走向DBA[MSSQL篇] 详解游标 前篇回顾:上一篇虫子介绍了一些不常用的数据过滤方式,本篇详细介绍下游标. 概念 简单点说游标的作用就是存储一个结果集,并根据语法将这个结果集的数据逐条处理. ...
- CCBValue
#ifndef __CCB_VALUE_H__ #define __CCB_VALUE_H__ #include "cocos2d.h" #include "Extens ...
- 初识 Cloudera Impala
Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统尽管也提供了SQL语义,但因为Hive底层 ...
- 拆分字段优化SQL
拆分字段优化SQL 今天看到一条用函数处理连接的SQL,是群里某位网友的,SQL语句如下: SELECT SO_Order.fdate , SO_Order.fsn FROM so_order INN ...
- 【MongoDB】Serveral common command of MongoDb
In the recent days, since the overwork made me exhaused, on arrival to home I will go to bed, which ...
- HMAC-SHA1算法签名及Authorization头认证
使用PHP进行HMAC-SHA1签名,并通过Authorization头认证Deom $app_id = 'id'; $host = "test.abc.com"; $port = ...