JavaScript的DOM_通过计算后样式来获取
虽然可以通过 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_通过计算后样式来获取的更多相关文章
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- js事件,操作页面文档,计算后样式,数据类型
js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="r ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- 探索javascript----获得节点计算后样式
节点计算后样式是一个属性与属性值的值对对象: IE: node.currentStyle; 非IE: window.getComputedStyle(node,null); 兼容方式: func ...
- JavaScript的DOM_操作行内样式
一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...
- js 计算后样式封装
function getStyle(obj,attr){ // 需要获取的元素 属性 if(obj.currentStyle){ return obj.currentStyle[attr]; }els ...
- js兼容方法：获取当前样式|计算后样式 getStyle
function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
- 前端笔记之JavaScript（八）关于元素&计算后的样式
一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...
随机推荐
- 玩转树莓派《三》——Scratch
今天大姨妈折磨了一整个白天,稍微好点,现在打开实验楼,看到有个朋友回答了关于ubuntu上面操作SQL 的时候到处数据到txt文件,被批评没有思考问题,或许吧,虽然那个权限我现在想起确实是可读可写的, ...
- C# 中的隐式类型转换(运算时的隐式转换)和显示类型转换
区别: 隐式转换失败编译会报错. 显示转换有可能精度丢失. 根据项目的编译设置,显示转换溢出可能会报错,如果设置溢出且未使用checked检查,运行时如果发生溢出会产出未知的计算结果. 在数字运算时, ...
- 第8天：javascriptDOM小 案例、onmouseover 、onmouseout
案例 为元素注册点击事件,弹出对话框 <input type="button" id="btn" value="开发分离"> & ...
- [C语言] 数据结构-预备知识结构体
结构体 为什么出现结构体 为了表示一些复杂的数据,而普通的基本类型变量无法满足需求 什么叫结构体 结构体是用户根据实际需要自己定义的复合数据类型 如何使用结构体 1.两种方式 一般使用结构体指针的形 ...
- 【转】Oracle SQL Developer 连接 Mysql 等数据库
原文地址:http://blog.163.com/cuixiao_yan/blog/static/319232442009102882651869/ Oracle SQL Developer 个人感觉 ...
- HBase入门教程
# 背景 最近看到公司一个项目用到hbase, 之前也一直想看下hbase.个人理解Hbase作为一个nosql数据库,逻辑模型感觉跟关系型数据库有点类似.一个table,有row即行,列.不过列是一 ...
- UGUI——重写Image类实现进度条
目的: 游戏中经常会用到进度条,但是美术给的图片用filled一拉伸就很难看,如下图 第一种模式是九宫格模式,第二种是filled.而我们需要的是两种可结合的. 如何实现: 新建一个类,继承image ...
- java设计模式-----5、原型模式
原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例.使用原型模式创建的实例,具有与原型一样的数据. 原型模式的特点: 1.由原型对象自身创建目标对象.也就是说 ...
- DBUtils结果集处理器介绍
common-dbutils.jar是Apache组织提供的一个对JDBC进行简单封装的开源工具类库,使用它能够简化JDBC应用程序的开发,同时也不会影响程序的性能. 1.QueryRunner类 ① ...
- textarea的maxlength属性兼容解决方案
IE10版本的textarea才支持maxlength属性:低版本的IE都不兼容,实际上低版本的IE的市场存在率还是很高的: 所以还是很有必要来整合一套解决方案的: Jquery版本 $(functi ...