虽然可以通过 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. 20个专业H5(HTML5)动画工具推荐

    AnimateMate 可能是最好的 Sketch 动画插件.Sketch 目前被广泛应用于 HTML5 的原型界面设计,或者被应用于数据可视化的,动画部分则一般经由软件 Principle 等实现. ...

  2. SQL 之相关语法及操作符

    概述:UNION.SELECT INTO.INSERT INTO SELECT.SQL 约束. UNION操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION ...

  3. Vs2015+opencv2.4.10出现msvcp120d.dll丢失 opencv2410.props

    今天vs2015配置好opencv编译运行会报错msvcp120d.dll丢失,只要把这个文件复制到你在第一步设置的Path环境变量路径里,和opencv的dll放在一起就行了.(初次配置完环境变量后 ...

  4. golang学习之slice基本操作

    slice的增删改查: //删除 func remove(slice []interface{}, i int) []interface{} { // copy(slice[i:], slice[i+ ...

  5. 1..net mvc的原理概述

    请求过来,根据ip和端口,由iis服务器进行接收,如果是静态文件则直接返回文件内容,如果无法解析,则根据映射规则找到对应请求后缀 的ASPNET_ISAPI.dll处理程序集,交由其进行处理. 1.此 ...

  6. BZOJ3625: 小朋友和二叉树

    传送门 Sol 设 \(f_x\) 表示权值为 \(x\) 的二叉树的个数 设 \(s_x\) 表示是否有 \(x\) 这种权值可以选择 那么 \[f_n=\sum_{i=0}^{n}\sum_{j= ...

  7. Django——REST framework

    1. 什么是REST REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...

  8. Ubuntu install TensorFlow 1.10 + CUDA 9.2 + cuDNN 7.2

      为了装TensorFlow 1.10 下面升级一下系统的软件环境 NVIDIA DRIVER 去官网下载最新的linux驱动   http://www.nvidia.com/Download/in ...

  9. 使用 npm 安装 Vue

    使用 npm 安装 Vue 需要 node.js 就不多说了(从 nodejs.org 中下载 nodejs ) (1)安装 Vue,在 cmd 里直接输入: npm install -g cnpm ...

  10. 毕向东_Java基础视频教程第20天_IO流(15~17)

    第20天-15-IO流(打印输出流) 打印输出流:PrintWriter与PrintStream 两者的区别:Since JDK 1.4 it's possible to specify the ch ...