JS获得css样式即获得元素的计算样式(《Javascript精粹修订版》书摘)
为HTML文档中的元素指定样式可以有3种方法:使用内嵌样式、在页面的head中对Style进行声明以及外部 CSS 文件。元素的视觉效果往往是由上述3种方式的结合或者其中某一种方式来确定的,但是内嵌样式通过元素的 Style 对象来访问,而其他的方式,相对应的style 对象属性将是空值。元素的计算样式包括了所有元素可以应用的样式。这些计算样式都可以通过javascript 访问,不过不是使用style 对象,而是需要更多一点的代码才能访问到他们。下面提供的代码就可以做到这些:
<div id="container" style="width:500px;cursor:pointer;">获得元素的计算样式</div>在 W3C DOM下,元素的计算样式可以通过 document.defaultView 并借助 getComputedStyle 方法来访问,代码如下:
var heading = document.getElementById("container");
var computedStyle = document.defaultView.getComputedStyle(heading,null);
var computedFontSize = computedStyle.fontSize;
alert(computedFontSize);而在 IE 中方法更简单一下,借助元素特有的属性 currentStyle便可以访问到计算样式了,代码如下:
var heading = document.getElementById('container');
var computedFontSize = heading.currentStyle.fontSize;
alert(computedFontSize);
综合上述的方法,我们给出了一个跨浏览器的计算样式的函数,代码如下:
function retrieveComputedStyle(element,styleProperty){
var computedStyle = null;
if (typeof element.currentStyle != 'undefined'){
computedStyle = element.currentStyle;
}else{
computedStyle = document.defaultView.getComputedStyle(element,null);
}
return computedStyle[styleProperty];
}
var heading = document.getElementById("container");
alert(retrieveComputedStyle(heading,"fontSize"));
虽然该方法能得到元素的样式,不过在不同的浏览器下,返回值可能不一样。这点要一定要注意,特别是在样式没有定义的情况。比如上面的例子中Firefox 返回 16px,而在 IE 中返回 12pt
JS获得css样式即获得元素的计算样式(《Javascript精粹修订版》书摘)的更多相关文章
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- 用css完成根据子元素不同书写样式
我们需要达到的效果: 需要什么 1张图片的, 2张图片的, 3张图片的样式各不相同.可以使用js完成子元素的判断,但是这里我使用css来完成 核心知识点 使用css选择器完成子元素的判断 例子: 用c ...
- CSS 控制鼠标在元素停留的样式
以下资料来自网络,收藏学习总结用: 有时候需要改变鼠标样式,DIV 可以改成手型等,A也可以改成光标形式 巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊.CSS鼠标样式 ...
- js和css文件位置对页面性能的影响
翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...
- 深入理解脚本化CSS系列第二篇——查询计算样式
× 目录 [1]getComputedStyle [2]注意事项 [3]currentStyle[4]IE 前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade ...
- 简短的几句js实现css压缩和反压缩功能
写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...
- 怎样使用自定义标签简化 js、css 引入?
国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
随机推荐
- 【ftp】服务器的链接命令
1. 连接ftp服务器 格式:ftp [hostname| ip-address] a)在Linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密 ...
- C# byte数组转成Bitmap对象
方法一: /// <summary> /// 将数组转换成彩色图片 /// </summary> /// <param name="rawValues" ...
- java 代码,练习ip,主机名的获取方法。InetAddress类
package clientFrame; import java.io.IOException; import java.net.*; public class tai { public static ...
- java图形用户界面边界布局管理器
总结:不同方向的组件,所用的板是不同的: package com.moc; //用布局写一个界面 ///运用边界布局 //2个按钮在北,2个按钮在南 //中央一个大按钮 //将同一方向的组件封装后布局 ...
- php爬虫神器cURL
cURL 网页资源(编写网页爬虫) 接口资源 ftp服务器文件资源 其他资源 static public function curl($url, $data = array(), $timeout = ...
- jQuery解析JSON出现SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data 我在使用$.parseJSON解析后 ...
- ceph 创建和删除osd
ceph 创建和删除osd 1.概述 本次主要是使用ceph-deploy工具和使用ceph的相关命令实现在主机上指定磁盘创建和删除osd,本次以主机172.16.1.96(主机名ha ...
- springboot成神之——springboot入门使用
springboot创建webservice访问mysql(使用maven) 安装 起步 spring常用命令 spring常见注释 springboot入门级使用 配置你的pom.xml文件 配置文 ...
- MFC 控件使用汇总
一.动态创建button CButton *button=new CButton; button->Create(_T(,,,),);//最后一个是ID BEGIN_MESSAGE_MAP(CM ...
- 第十六章 Java内存模型(待续)
········