style、currentStyle、getComputeStylel的使用

(1)js中使用obj.style的用法,是为了获得内联样式,即style属性中的值。

如果想获取obj.style.display,但内联样式表中没有定义display,那么将返回一个空的字符串。

(2)使用obj.currentStyle则是为了获得外部(即通过<link>引入)和内部(即<style>中定义)的样式表中的值。

currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:内嵌样式、样式表规则、HTML 标签属性、HTML 标签的内部定义。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #text{
 8                 width: 200px;
 9                 height: 30px;
10             }
11         </style>
12         <script type="text/javascript">
13             function objClick(obj){
14                 alert(obj.style.width);
15                 alert(obj.currentStyle.height);
16             }
17         </script>
18     </head>
19     <body>
20         <div>
21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
22         </div>
23     </body>
24 </html>

注意:只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式,其他浏览器中不支持。ps:由于忽略了这个条件,一直在chrome下调试,怎么都不起作用,所以浏览器的兼容性,一定要切记。

(3)window.getComputedStyle(obj,null)

Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是readonly的。

参数说明:

第一个参数为要获取计算后的样式的目标元素

第二个参数为期望的伪元素,如 ‘:after‘,‘:first-letter‘ 等,而不是伪类如 ‘:hover‘ 等。

注意:在 Firefox 中,第二个参数是必须的,如果没有期望的伪元素要设置为 ‘null‘,这与规范的要求相符。在 Chrome Safari Opera 中,第二个参数如果为 ‘null‘ 则可以省略。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #text{
 8                 width: 200px;
 9                 height: 30px;
10             }
11         </style>
12         <script type="text/javascript">
13             function objClick(obj){
14                           alert(window.getComputedStyle(obj,null).getPropertyValue("width"));
15                           alert(window.getComputedStyle(obj,null).getPropertyCSSValue("width").cssText);
16                }
17         </script>
18     </head>
19     <body>
20         <div>
21             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">
22         </div>
23     </body>
24 </html>

经测试:第一种方法,在IE和chrome中通用,第二种,IE下不支持。

时间: 2024-08-24 18:57:16

style、currentStyle、getComputeStylel的使用的相关文章

js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

一.style,currentStyle和getComputedStyle的区别 <script>  function getStyle(obj, attr)   {       if(obj.currentStyle)       {          return obj.currentStyle[attr];  //只适用于IE     }       else       {          return getComputedStyle(obj,false)[attr];   //

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

用JS查看修改CSS样式(cssText,attribute(&#39;style&#39;),currentStyle,getComputedStyle)

CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

JavaScript中style, currentStyle和 getComputedStyle的异同

今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的不同! 首先样式表有三种,外联样式,内联样式,行间样式,element.style.attr只有在attr定义在行间样式时才生效,因此替代方案,currentStyle和getComputedStyle出现了. currentStyle是由微软提出来的,目的就是为了返回当前元素应用的属性,不管是外联

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20

dojo/dom-style样式操作学习笔记

基础总结 一个元素的样式信息由三个来源根据层叠规则确定.三个来源分别是: 由DOM元素style特性设置的内联样式 由style元素中嵌入的样式规则 由link元素引入的外部样式表 元素的样式 任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性.这个style对象是CSSStyleDeclaration的实例,包含着通过HTML的style特性指定的所有样式信息,但不包含与外部样式表或嵌入样式表经层叠而来的样式.在style特性中指定的任何css属性都可以通

微信小程序「官方示例代码」剖析【下】:运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的--就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码--真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

ToolKit与jQuery类似的前端插件

优点: 丢弃了一些不常用的方法(jQuery.fn):slideUp.fadeIn.animate等: 新增获取子节点的方法(ToolKit.fn):firstChild,lastChild等: 新增ToolKit.Threads线程操作函数(有效解决自定义弹窗同时运行的问题): 加入JSON对象(JSON.parse和JSON.stringify); 重写ToolKit.toString方法为JSON.stringify,ToolKit.get和ToolKit.post的dataType为js

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It