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 { ...
随机推荐
- [BZOJ5133][CodePlus2017年12月]白金元首与独舞
bzoj luogu 题意 给你一个\(n*m\)的网格,每个位置上有一个箭头指向上或下或左或右.有些位置上还没有箭头,现在要求你在这些没有箭头的位置上填入箭头,使得从网格的任意一个位置开始,都可以沿 ...
- 1.1对java web开发的一点理解
前言 Q:通常行内人士见面会问你,你做哪方面开发的? A:java web开发的 那么,什么是java web开发? java web开发通常是指java web应用程序的开发.一个B/S架构的 we ...
- 前端工程师面试问题归纳(二、问答类JQ相关)
其他随笔 前端工程师面试问题归纳(一.问答类html/css/js基础) 前端工程师面试问题归纳(三.代码类) 1. jQuery 库中的 $() 是什么? $() 函数是 jQuery() 函数的别 ...
- Firewalld常用命令
原文地址:http://www.excelib.com/article/288/show Firewalld防火墙中所使用到的命令可以分为三大类:安装卸载.维护和策略操作. 安装 在Centos7中默 ...
- linux的审计功能(audit)
为了满足这样的需求:记录文件变化.记录用户对文件的读写,甚至记录系统调用,文件变化通知.什么是auditThe Linux Audit Subsystem is a system to Collect ...
- 【转】使用Jmeter测试Webservice简单示例
1.webservice 先简单开发webservice,参考文档 http://www.cnblogs.com/xwdreamer/archive/2011/12/07/2296914.html w ...
- java.控制次数,每一组数都要计算。所以有个嵌套
总结:数组内的数据要循环,外面的次数也要循环 package com.aini; import java.util.Scanner; //要求可以控制输入的次数,比如4次.则输入5个数,5组输出结果 ...
- 常用hash算法及评测[转]
RS hash 算法 unsigned int RSHash(char* str, unsigned int len) { unsigned int b = 378551; un ...
- redis实现消息发布/订阅
redis实现简单的消息发布/订阅模式. 消息订阅者: package org.common.component; import org.slf4j.Logger; import org.slf4j. ...
- SQL Server2005中文版x64安装29506错误解决办法
在使用SQL Server 2005简体中版安装时,使用X86(32位操作系统下)安装没有出现任何问题.可是在X64(64位操作系统下)安装过程没有出现问题,可是安装完成后却没有Microsoft S ...