获取元素样式 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 一.碎碎念~前 ...
随机推荐
- iOS 检测网络切换
CFNotificationCenterAddObserver(CFNotificationCenterGetDarwinNotifyCenter(), //center ...
- c++学生成绩管理系统
虽然比较水 =.= 但是写了两节课+一个中午 都是强迫症的锅 http://www.cnblogs.com/wenruo/p/4940182.html #include <cstdio> ...
- 2015 CCPC D- Pick The Sticks(UESTC 1218) (01背包变形)
http://acm.uestc.edu.cn/#/problem/show/1218 既然二维dp表示不了,就加一维表示是否在边界放置,放置一个,两个.有一个trick就是如果只放一根,那么多长都可 ...
- VisualBox会造成VPN连接不上问题
今天连接VPN查找点资料,但是怎么也连接不上,一直出现651错误,开始以为是服务器配置原因,重新配置后发现问题依旧,后查找相关资料,发现有提到VisualPC, 感觉VisualBox跟VisualP ...
- 说一说window.parent
<iframe>标签是很常用的,嵌在页面之中,可以做独立的加载和刷新.比如说,页面分左右或者上下结构,一般左侧和上侧是导航部分,右侧和下侧是目标页面的展示部分,只需要设置导航链接的targ ...
- 如何通过进程名获取进程ID
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何通过进程名获取进程ID.
- Xcode6中使用initWithTitle:title image:image selectedImage:自定义图片
使用xcode6来运行项目,发现使用原生的tabbar上的图片不显示了. 这个问题是因为xcode6中的一些api方法被废弃了,同时tabbar上图片的渲染方式发生了改变. 先看xcode6中的tab ...
- 初学ios遇到问题记录01
刚刚接触IOS,花了一段时间看我基础部分的OC后 就想试着弄个小程序,于是看到 http://www.cnblogs.com/LooDo/p/3907064.html博文中的小程序,博主分析的很详细, ...
- 玩转ButterKnife注入框架
在去年这个时候,我写过一篇介绍Android注解的文章android注解使用详解,这篇文章主要是介绍了Android中的AndroidAnnotations注入框架,AA框架有它自身的一些优点,这里不 ...
- ArcGIS中文件共享锁定数据溢出 这个方法不行,建议用gdb,不要用mdb
ArcGIS中文件共享锁定数据溢出 (2011-11-24 15:52:41) 转载▼ 标签: 杂谈 分类: GIS 文件共享锁定数溢出.(Error 3052)1. Access数据库,同时操作大量 ...