虽然可以通过 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. java并发编程（8）原子变量和非阻塞的同步机制

    原子变量和非阻塞的同步机制 一.锁的劣势 1.在多线程下:锁的挂起和恢复等过程存在着很大的开销(及时现代的jvm会判断何时使用挂起,何时自旋等待) 2.volatile:轻量级别的同步机制,但是不能用 ...

  2. Delphi下OpenGL2d绘图(06)-画图(多窗口、多视图、多个DC）

    一.前言 在学习OpenGL的过程中,发现很多函数都是全局的.前面几章中都是在一个窗口DC中画图,那么要在多个窗口画图,需要怎么处理呢?网上方法有多种,这里采用其中一种,利用wglMakeCurren ...

  3. [转载]Vue 2.x 实战之后台管理系统开发（一）

    2. 开发前须知 我的后台管理系统项目运用了如下框架/插件: Vue 2.x —— 项目所使用的 js 框架,我所使用的版本是:2.1.10 vue-router 2 —— Vue 2.x 配套路由, ...

  4. ef——存储过程

      数据库中存在存储过程GetCategory: ALTER proc [dbo].[GetCategory] @cid int as begin select * from Categories w ...

  5. Java jxl导入excel文件，导入的数字、身份证号码、手机号变成了科学计数法，解决方案

    原文出自:https://blog.csdn.net/seesun2012 这是一个execl文件导入数据库操作,使用jxl解析execl导入数据库过程出现了科学计数法,与想要导入的数据不匹配,以下是 ...

  6. 怎么使用fiddler 测试post get 接口

    直接上图 测试 post

  7. Java学习--Java 中的包装类

    Java 中的包装类 相信各位小伙伴们对基本数据类型都非常熟悉,例如 int.float.double.boolean.char 等.基本数据类型是不具备对象的特性的,比如基本类型不能调用方法.功能简 ...

  8. 三：Bootstrap-js插件

    模式框: <button class="btn btn-default btn-lg" data-toggle="modal" data-target=& ...

  9. 为什么要学习 UML？

    UML 的首要价值是沟通和理解.好的图形可以帮助沟通设计思想,尤其是要回避许多细节时,图形也可以帮助你理解软件系统或业务流程.作为团队的成员,尝试弄清楚某些东西时,图形有助于理解和沟通整个团队所理解到 ...

  10. MVC 中导出Execl 对 科学计数 的转化

    相信大家在使用MVC 的做execl 数据导出的时候,遇到过 身份证号码 银行卡号 交易号 等一大串数字的时候,在导出execl 的时候就会出现 科学计数的输入:下面来说一下解决方案: 第一种:在MV ...