获取元素样式 currentStyle 和 getcomputedStyle
场景
你要获取某一元素的样式，可是没有获取到，返回的值为undefined，可是有时候又能成功？
为什么？
因为，xx.stly.xxx 可以获取的样式信息，是dom元素style属性里的样式，对于通过<style>标签，或外部样式表定义的，我们就无法获取了。当然，js给予的也是dom。
怎么办？
dom标准里有个全局方法 getComputedStyle 。可以获取到当前对象样式规则信息，这还不算完，因为IE不支持。。。
IE有自己的 currentStyle 所以，你要兼容他们，怎么做？
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,html{
height: 100%;
}
body{
background-color:red;
background-image:url(实验.png)
}
</style>
</head>
<body>
<div id="div1" style=''></div>
</body>
<script type="text/javascript">
window.onload = function(){
function t (obj,sx) {
if(obj.currentStyle){
return obj.currentStyle[sx];
}else{
return getComputedStyle(obj,false)[sx];
}
}
var body =document.getElementsByTagName('body');
body[0].style.backgroundImage ="url(实验.png)";
alert(t(body[0],"backgroundColor"));
}
</script>
</html>
大家可以试试。
获取元素样式 currentStyle 和 getcomputedStyle的更多相关文章
- 函数return/获取元素样式/封装自己的库
一:函数return <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
- JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 转贴：获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
- Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...
- js学习笔记7----return，arguments及获取元素样式
1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
随机推荐
- hdu5564--Clarke and digits（数位dp+矩阵快速幂）
Clarke and digits 问题描述 克拉克是一名人格分裂患者.某一天,克拉克变成了一个研究人员,在研究数字. 他想知道在所有长度在[l,r]之间的能被7整除且相邻数位之和不为k的正整数有多少 ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- cmd 控制台 提示：请求的操作须要提升！
cmd 控制台 提示:请求的操作须要提升! 在windows7中想用route add 或相关route等命令须要以管理员身份执行,假设windows7以下没有以管理身份执行那么加入路由时候route ...
- hdu2571动态规划
125ms.... 太慢了...dp[i][j] = max(dp[i][j-1],dp[i-1][j],dp[i][k],1<k<j&&j%k==0); #include ...
- [Javascript] Drawing Paths - Curves and Arcs
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- <ASP.NET4 从入门到精通>学习笔记3
第三部分,状态管理与缓存 何为状态管理.起始对于web而言.经过前面章节的解说.已经理解,对于web程序,就是一个无状态的程序.每次的请求与每次的响应,两者之间本身就是独立存在的,这一点对于早期的静态 ...
- MySQL主主复制+LVS+Keepalived实现MySQL高可用性1
http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...
- ArrayList的实现原理--转
1. ArrayList概述: ArrayList是List接口的可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些方法来操作内部 ...
- 【转】文件中有10G个整数，乱序排列，要求找出中位数
题目:在一个文件中有 10G 个整数,乱序排列,要求找出中位数.内存限制为 2G.只写出思路即可(内存限制为 2G的意思就是,可以使用2G的空间来运行程序,而不考虑这台机器上的其他软件的占用内存). ...
- 【Android】 onSaveInstanceState()恢复数据
onSaveInstanceState()方法会携带一个 Bundle 类型的参数,Bundle 提供了一系列的方法用于保存数据,比如可以使用 putString()方法保存字符串,使用 putInt ...