js获取当前有效样式
<style>
#div1{height: 200px; font-size: 9pt;">
</style>
<body>
<div id = 'div1' style = "width: 100px;"></div>
</body>
<head>
<meta charset="UTF-8">
<title>获取当前有效样式</title>
<style>
#div1 {
height: 200px;
background-color: red;
} </style>
<script>
window.onload = function (){
var oDiv = document.getElementById('div1');
// alert(oDiv.currentStyle['height']);//ie兼容 结果:200px
//alert(getComputedStyle(oDiv)['height']) // 结果: 200px; 火狐、谷歌下 /*--------封装一个可以获取当前有效样式切不用考虑兼容问题的函数---------*/ //分析
//alert(oDiv.currentStyle);//undefined //ie的方法在火狐或谷歌里没有这个方法,系统定义为undefined
//alert(Boolean(oDiv.currentStyle)); //undefined 强制转换为布尔值为false 谷歌火狐中测试
//所以可以这样封装一个函数 浏览器兼容写法 function getStyle(node, styleType){
return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];
}
/*------函数封装完毕--------*/ /*-------调用测试--------*/ alert(getStyle(oDiv, 'height'));// 200px }
</script>
</head>
<body>
<div id = "div1" style="width: 100px;">我是div</div>
</body>
function getStyle(node, styleType){
return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//浏览器中有node.currentStyle方法就用,没有就用另一个
}
js获取当前有效样式的更多相关文章
- JS获取内联样式
JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- 通过js获取外部css样式
通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- js获取非行内样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式/写入样式(行间)
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
随机推荐
- 盖得化工----requests/bs4---采集二级网址
Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...
- springboot环境下配置过滤器和拦截器
以前我们在配置过滤器和拦截器的时候,都是一个类继承一个接口,然后在xml中配置一下就ok 但是,但是,这是springboot的环境,没有xml的配置.所以我们还要继续学习啊啊啊啊啊~~~~~ 先简单 ...
- POJ No.3255 Roadblocks 求次短路径
#define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...
- Nginx 学习笔记(三)proxy_cache 缓存配置和ngx_cache_purge模块
反向代理的缓存清理 一.proxy_cache配置 (1)如何配置和安装,都在这里了:https://github.com/Tinywan/Lua-Nginx-Redis/blob/master/Ng ...
- 消除 transition 闪屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspectiv ...
- VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...
- Winform窗体设计工具源码
源代码:QQ群616945527,博客资源
- 【转】Robot Framework作者建议如何选择自动化测试框架
原文:http://www.infoq.com/cn/news/2012/06/robot-author-suggest-autotest 软件自动化测试,作为手工测试的替代,越来越受到关注.Pekk ...
- wpc 双工
在控制台部署wcf双工 这个可以被silverlight 使用 <?xml version="1.0" encoding="utf-8" ?> &l ...
- Postfix - Extmail 邮箱系统
Postfix Dovecot Extmail 邮箱系统早前的内部邮箱系统重新整理下:现在Extmail官方有集成镜像的EMOS_1.6_x86_64免费版:可直接下载安装: 系统环境: linux ...