利用JavaScript获取浏览器计算后的样式

HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用currentStyle对象与getComputedStyle方法来获取浏览器计算后的样式。

哪些样式是属于浏览器计算后的样式

要检测标签的样式有包含在头部书写样式、标签内联样式和外部的样式,即浏览器计算后的样式。

getComputedStyle(element[, pseudoElt])方法

element用于计算样式的标签;pseudoElt可选指定一个伪元素进行匹配。对于常规的元素来说可省略。

window.getComputedStyle(element[, pseudoElt])方法获取标签在浏览器里计算的样式。

实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
    .btn {
        width: 100px;
    }
    .btn:after {
        display: block;
        width: 20px;
        height: 20px;
        background-color: red;
        content: ".";
    }
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
    var box = document.getElementById("con");
    box.style.height = "1000px";


    // 获取标签浏览器计算后的样式
    console.log(window.getComputedStyle(box, null).getPropertyValue("height"));
    console.log(window.getComputedStyle(box, null).getPropertyValue("width"));
    // 获取伪元素浏览器计算后的样式
    console.log(window.getComputedStyle(box, "after")["content"]);
    console.log(window.getComputedStyle(box, "after")["background-color"]);
    // 注意:getComputedStyle(box, null).getPropertyValue("height")等价于getComputedStyle(box, null)["height"]
</script>
</body>
</html>

关于defaultView

在许多JavaScript框架, getComputedStyle是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的,因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView, 那是在火狐3.6上访问子框架内的样式 (iframe)——资料来源mozilla

jQuery部分源代码

实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
    .btn {
        width: 100px;
    }
    .btn:after {
        display: block;
        width: 20px;
        height: 20px;
        background-color: red;
        content: ".";
    }
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
    var box = document.getElementById("con");
    box.style.height = "1000px";


    // 获取标签浏览器计算后的样式
    console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("height"));
    console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("width"));
    // 获取伪元素浏览器计算后的样式
    console.log(document.defaultView.getComputedStyle(box, "after")["content"]);
    console.log(document.defaultView.getComputedStyle(box, "after")["background-color"]);
</script>
</body>
</html>

浏览器支持程度

currentStyle对象是IE浏览器专有

从上面可以看出IE6~8不支持getComputedStyle该方法,利用currentStyle对象处理兼容咯~

实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
    .btn {
        width: 100px;
    }
    .btn:after {
        display: block;
        width: 20px;
        height: 20px;
        background-color: red;
        content: ".";
    }
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
    var box = document.getElementById("con");
    box.style.height = "1000px";


    // 获取标签浏览器计算后的样式
    console.log(box.currentStyle["width"]);
    console.log(box.currentStyle["height"]);


    // 注意:获取伪元素浏览器计算后的样式——该对象不支持
</script>
</body>
</html>

获取标签浏览器计算后的样式兼容处理

/*
* 功能:获取渲染后标签的样式,element是标签的对象,property是标签样式属性值
* 参数:element是元素对象,property是样式属性
* demo:getStyle(move, "marginLeft");
* author:HTML5学堂
*/
function getStyle(element, property){
var proValue = null;
if (!document.defaultView) {
    proValue = element.currentStyle[property];
} else {
    proValue = document.defaultView.getComputedStyle(element)[property];
}
return proValue;
}

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

2130
来自专栏web前端教室

WEB前端架构(二)

继续想到哪说哪,, 继上一期说,定好了MVC结构之后 就准备先搞些组件出来,首先就是抽个input出来。。 目前有登录页和用户地址栏页, input至少有二...

1806
来自专栏理论坞

你可能从不知道的ICON分类

图标设计,是ui设计中的最重要的设计元素之一,优秀的图标其识别性会让人一眼看出它的含义,而不需要大量的文字说明;

1072
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的《Bootstrap开发框架》的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个...

2387
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

1718
来自专栏林德熙的博客

win10 uwp 绘图 Line 控件使用

本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

552
来自专栏HTML5学堂

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还...

3226
来自专栏HTML5学堂

HTML5-类库系列 事件与获取完成版样式

HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:获取渲染后样式以及事件兼容处理。渲染后样式修正了通过...

3317
来自专栏青玉伏案

Target-Action回调模式

        前面的博客中提到过回调的概念,是在OC通过协议来实现的回调,和Java中的接口的回调极为相似,下面来介绍另一种方法回调模式: Target-Ac...

1729
来自专栏HTML5学堂

新浪面试真题

1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

29911

扫码关注云+社区