HTML5学堂-码匠 HTML5学堂

您当前位于:DOM文档操作 ——> getComputedStyle 获取渲染后样式的基本方法
上一篇:没有了 下一篇:JavaScript 快速修改标签多种样式 - cssText

getComputedStyle 获取渲染后样式的基本方法

2015/11/07 11:55:39 | 作者:HTML5学堂(码匠) | 分类:DOM文档操作 | 关键词:currentStyle,渲染后样式,获取

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

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

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

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

getComputedStyle(element[, pseudoElt])方法

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

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

实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.     <style>
  9.         .btn {
  10.             width: 100px;
  11.         }
  12.         .btn:after {
  13.             display: block;
  14.             width: 20px;
  15.             height: 20px;
  16.             background-color: red;
  17.             content: ".";
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
  23.     <script>
  24.         var box = document.getElementById("con");
  25.         box.style.height = "1000px";
  26.  
  27.         // 获取标签浏览器计算后的样式
  28.         console.log(window.getComputedStyle(box, null).getPropertyValue("height"));
  29.         console.log(window.getComputedStyle(box, null).getPropertyValue("width"));
  30.         // 获取伪元素浏览器计算后的样式
  31.         console.log(window.getComputedStyle(box, "after")["content"]);
  32.         console.log(window.getComputedStyle(box, "after")["background-color"]);
  33.         // 注意:getComputedStyle(box, null).getPropertyValue("height")等价于getComputedStyle(box, null)["height"]
  34.     </script>
  35. </body>
  36. </html>

欢迎沟通交流~HTML5学堂

关于defaultView

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

jQuery部分源代码

关于defaultView

实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.     <style>
  9.         .btn {
  10.             width: 100px;
  11.         }
  12.         .btn:after {
  13.             display: block;
  14.             width: 20px;
  15.             height: 20px;
  16.             background-color: red;
  17.             content: ".";
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
  23.     <script>
  24.         var box = document.getElementById("con");
  25.         box.style.height = "1000px";
  26.  
  27.         // 获取标签浏览器计算后的样式
  28.         console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("height"));
  29.         console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("width"));
  30.         // 获取伪元素浏览器计算后的样式
  31.         console.log(document.defaultView.getComputedStyle(box, "after")["content"]);
  32.         console.log(document.defaultView.getComputedStyle(box, "after")["background-color"]);
  33.     </script>
  34. </body>
  35. </html>

浏览器支持程度

getComputedStyle浏览支持程度

getComputedStyle浏览支持程度

currentStyle对象是IE浏览器专有

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

实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.     <style>
  9.         .btn {
  10.             width: 100px;
  11.         }
  12.         .btn:after {
  13.             display: block;
  14.             width: 20px;
  15.             height: 20px;
  16.             background-color: red;
  17.             content: ".";
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
  23.     <script>
  24.         var box = document.getElementById("con");
  25.         box.style.height = "1000px";
  26.  
  27.         // 获取标签浏览器计算后的样式
  28.         console.log(box.currentStyle["width"]);
  29.         console.log(box.currentStyle["height"]);
  30.  
  31.         // 注意:获取伪元素浏览器计算后的样式——该对象不支持
  32.     </script>
  33. </body>
  34. </html>

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

  1. /*
  2.  * 功能:获取渲染后标签的样式,element是标签的对象,property是标签样式属性值
  3.  * 参数:element是元素对象,property是样式属性
  4.  * demo:getStyle(move, "marginLeft");
  5.  * author:HTML5学堂
  6.  */
  7. function getStyle(element, property){
  8.     var proValue = null;
  9.     if (!document.defaultView) {
  10.         proValue = element.currentStyle[property];
  11.     } else {
  12.         proValue = document.defaultView.getComputedStyle(element)[property];
  13.     }
  14.     return proValue;
  15. }

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:没有了 下一篇:JavaScript 快速修改标签多种样式 - cssText