获取元素样式 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 一.碎碎念~前 ...
随机推荐
- 安装 Linux 与 Windows 10 双系统，你需要了解的一切
该选Windows 10还是Linux Mint?鱼与熊掌当然可以兼得,但咱们得掌握点小技巧才能顺利搞定. Windows 10绝不是唯一一款值得我们安装在自己计算机之上的免费操作系统.Linux只靠 ...
- python学习之列表
#coding:utf-81.#reverse方法将列表的元素反向存放,改变了原列表但不返回值x=[5,2,4,3,8]x.reverse() #x[::-1] 不改变list反向排序print x ...
- Windows下Apache+Tomcat+jsp+php的服务器整合配置经验总结
对于Apache+Tomcat+jsp+php的整合,针对不同的Tomcat和apache的版本,稍微有些区别. 一.所需软件 (1)JDK: jdk-7u15-windows-x64.exejdk的 ...
- OpenWRT加入 crontab开机默认运行
[转载请注明出处:钱国正专栏 http://blog.csdn.net/qianguozheng/article/details/37666829] OpenWRT系统默认已经加入了crond,仅仅是 ...
- oracle数据库导入导出的dmp(转)
window下: imp必须要dba用户,所以用sysdba用户登陆,然后给予chnlmgr用户dba权限 grant connect,resource,dba to chnlmgr; 全部导入 im ...
- RHCA442学习笔记-Unit13网络性能调整
UNIT 13 Essential Network Tuning 网络性能调整 目标:1. 应用队列技术最大化网络吞吐量 2. 调整TCP和non-TCP网络soc ...
- web服务器决定支持多少人同时在线的因素
经常遇到一些做WEB用户咨询服务器支持在线人数问题,在此做个简单介绍.非技术性讨论,如有疏漏或错误,敬请原谅和指导.以普通单路服务器为例,CPU处理多个进程,并非是同一时刻处理的,(可以精确到1/10 ...
- Android开发之Intent的传值--Application
每当我们想要将输入的值传递到多个界面时,只是使用Intent传值的话,就会有一些的弊端. 下面我就以三个页面为例,进行简单的说明一下: 思路: 1.第一个页面是客户输入相关的信息. 2.将客户输入的信 ...
- hibernate缓存技术
1.缓存 2.Hibernate 缓存作用:为了提高查询效率. 3.第一次操作某个对象的时候,把操作的对象数据存储到缓存中,然后下一次在对同一个对象操作的时候,就不会在连接数据库. 4.Hiberna ...
- 破解C#的readonly只读字段
破解C#的readonly只读字段 目录 请允许我再唠叨几句const和readonly 修改readonly字段: 计策1:反间计 -- 反射修改 计策2:借刀杀人--调节字段偏移位置的结构体来修改 ...