获取元素样式 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 一.碎碎念~前 ...
随机推荐
- hdoj 3849 By Recognizing These Guys, We Find Social Networks Useful【双连通分量求桥&&输出桥&&字符串处理】
By Recognizing These Guys, We Find Social Networks Useful Time Limit: 2000/1000 MS (Java/Others) ...
- [三]ajax重要属性
readState:0初始化,1建立,2已接收,3处理中,4请求完成,响应就绪 status:200成功,404未找到页面失败 onreadystatechange:状态改变自动调用的方法 respo ...
- 解决org.apache.subversion.javahl.ClientException: svn: E200007: Runner for 'org.tmatesoft.svn.core.wc2.SvnMerge' command have not been found
最近使用svn的merge功能合并代码,一直出现一个错误: org.apache.subversion.javahl.ClientException: svn: E200007: Runner for ...
- JSP中解决获取请求参数中文乱码问题
分两种情况: 1.获取访问请求参数时乱码 解决方法:构造一个新的String String user = new String(request.getParameter("user" ...
- PowerDesigner建数据库模型增加自定义扩展属性
PowerDesigner自7.x新增加一个特性,就是允许用户通过扩展模型的方式扩展模型的属性,但到底怎用一直搞不清楚．今天和同事商量准备直接在程序的Metadata信息实现上直接使用pdm时,我们需 ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- 13 引用WINAPI
[System.Runtime.InteropServices.DllImport("user32.dll", EntryPoint = "SetWind ...
- Android将应用log信息保存文件
相信大家在做应用调试的时候,不可能时时通过USB线连着电脑去查看log信息,所以,将应用的log信息保存到手机本地就很有必要了,有助我们从这些log信息中提取有用的部分,以解决一些bug,下面我把网上 ...
- Android开源git40个App源码
http://www.itbbu.com/1039.html (JamsMusicPlayer)很棒的音乐播放器(new) (F8)日程安排的软件 (Conversations)基于XMPP的 ...
- ubuntu 远程 ubuntu
一:被远程端ubuntu配置 參考windows远程ubuntu这篇文章里面的ubuntu配置 二:远程端ubuntu配置 1:打开Remmina Remote Desktop Client软件,例如 ...