虽然可以通过 style 来获取单一值的 CSS 样式，但对于复合值的样式信息，就需要通过计算样式来获取。

DOM2 级样式，window 对象下提供了 getComputedStyle()方法。接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有没有伪类，就填 null。

这种计算样式的获取，不仅仅可以获取到没有设置的默认样式，也可以获取行内，内联和链接（因为不管你在哪里设置CSS，最终会驻留在浏览器的计算样式里）

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取 box

        var style = window.getComputedStyle(box,null);

        alert(style);                    //[object CSS2Properties],表示计算后的css样式

        alert(style.fontSize);            //结果是计算后的样式，一般表示默认样式和设置后的样式，即如果设置了样式结果是设置后的样式，如果没有设置就是默认的样式

    }

</script>

</head>

<body>

    <div id="box" style="color:#F00; font-size:20px;">测试Div</div>

</body>

IE 6,7,8不支持这个 DOM2 级的方法，但有个类似的属性可以使用 currentStyle 属性通过节点调用。

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取 box

        var style = box.currentStyle;

        alert(style.color);

    }

</script>

</head>

<body>

    <div id="box" style="color:#F00; font-size:20px;">测试Div</div>

</body>

做兼容

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box'); //获取 box

        var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle;

        alert(style.color);                 //颜色在不同的浏览器会有 rgb()格式

        alert(style.fontSize);

        alert(style.border);                 //不同浏览器不同的结果,这个属性被计算之后就不存在了,这个属性不兼容IE6,7,8  最好borderTopColor  这样每个获取

        alert(style.fontFamily);             //计算显示复合的样式值

        alert(box.style.fontFamily);         //空

    }

</script>

</head>

<body>

    <div id="box" style="color:#F00; font-size:20px;">测试Div</div>

</body>

JavaScript的DOM_通过计算后样式来获取的更多相关文章

  1. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  2. js事件,操作页面文档,计算后样式,数据类型

    js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...

  3. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

  4. 探索javascript----获得节点计算后样式

    节点计算后样式是一个属性与属性值的值对对象: IE:    node.currentStyle; 非IE: window.getComputedStyle(node,null); 兼容方式: func ...

  5. JavaScript的DOM_操作行内样式

    一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...

  6. js 计算后样式封装

    function getStyle(obj,attr){ // 需要获取的元素 属性 if(obj.currentStyle){ return obj.currentStyle[attr]; }els ...

  7. js兼容方法：获取当前样式|计算后样式 getStyle

    function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...

  8. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  9. 前端笔记之JavaScript（八）关于元素&计算后的样式

    一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...

随机推荐

  1. xml布局中include的使用

    参考:http://blog.csdn.net/harvic880925/article/details/17263275 include_button1.xml <?xml version=& ...

  2. [译]用R语言做挖掘数据《六》

    异常值检测 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: ...

  3. 升级Ubuntu 到14.04 64位 后eclipse出现闪退现象

    升级Ubuntu 到14.04 64位 后eclipse出现闪退现象,搜了各种方法,最后解决问题 解决方法: 在所装的eclipse的目录下有个configuration/config.ini 文件 ...

  4. 搭建jdk环境

    jdk(java develop toolkit)主要包括:编译程序的javac,运行程序的java,javaAPI类库. 主要步骤: 下载jdk安装包 设置环境变量(JAVA_HOME,Path,C ...

  5. 经典SQL分页语句

    select top pageSize, * from (SELECT row_number() over(order by id desc) as rownumber,*FROM tb1) A wh ...

  6. MongoTemplate基本操作

    本文基于spring boot项目,快速构建项目请参考:https://www.cnblogs.com/lay2017/p/8836273.html 添加mongo依赖 <dependency& ...

  7. eclipse 更改背景颜色字体

    原文 切一个自己的图: 废话不说,直接入题. 方式一:替换Eclipse的配置文件 其实Eclipse的各种配置都是在文件设置里的,因此只要用一个配置好的模版来替换默认的配置文件,即可将所有配置克隆到 ...

  8. RESTful api 设计规范

    该仓库整理了目前比较流行的 RESTful api 设计规范,为了方便讨论规范带来的问题及争议,现把该文档托管于 Github,欢迎大家补充!! Table of Contents RESTful A ...

  9. springcloud 实战 网关zuul使用中遇到的相关问题

    springcloud 实战  网关zuul使用中遇到的相关问题 1.网关zuul使用时,跨域问题在网关中配置pre过滤器: response.setHeader("Access-Contr ...

  10. Bootstrap网格

    首先了解一下,什么是网格? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于 ...