利用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 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法

当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法...

341
来自专栏hightopo

基于 HTML5 的 3D 工控隧道案例

912
来自专栏刘望舒

React Native探索(四)Flexbox布局详解

前言 在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布局就...

1949
来自专栏企鹅号快讯

react.js 学习笔记

单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

19210
来自专栏林德熙的博客

WPF 如何在 WriteableBitmap 写文字

最近看到WPF 使用不安全代码快速从数组转 WriteableBitmap 可以快速从数组转 WriteableBitmap 所以就让他画一些元素,但是发现元素...

121
来自专栏流柯技术学院

selenium webdriver自动化对日期控件的处理

--------------------------------------------------------------------------------...

491
来自专栏云瓣

React之父子组件传递和其它一些要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项...

3298
来自专栏前端儿

图片轮播(左右切换)--JS原生和jQuery实现

左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

801
来自专栏糊一笑

react新手教程

github仓库 https://github.com/Rynxiao/react-newer JSX语法 const element = <h1>Hello,...

2656
来自专栏杂七杂八

css布局使用

目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

2789

扫描关注云+社区