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 ...
随机推荐
- 事件对象——event
一.介绍 把一个click时间log出来是这样的: { altKey:false, bubbles:true, button:0, buttons:0, cancelBubble:false, can ...
- C# 多线程辅助类实现多任务
1)首先实现一个多线程的辅助类,代码如下: public class ThreadMulti { public delegate void DelegateComplete(); public del ...
- 浅谈分词算法(5)基于字的分词方法(bi-LSTM)
目录 前言 目录 循环神经网络 基于LSTM的分词 Embedding 数据预处理 模型 如何添加用户词典 前言 很早便规划的浅谈分词算法,总共分为了五个部分,想聊聊自己在各种场景中使用到的分词方法做 ...
- 03-Windows Server 2016 IIS的安装与配置
1. 打开服务器管理器,点击[添加角色和功能选项]. 2. 进入“添加角色和功能向导”页面,点击下一步. 3. 安装类型选择[基于角色或基于功能的安装],点击下一步. 4. 进入服务器选 ...
- Winfrom多文档界面实现
Winfrom多文档界面实现 闲来无事,研究了下比较常用的多文档界面风格,网上找了好多例子,最终实现.记录一下 废话不多说,先上个效果: 默认打开我的桌面,首页不允许关闭,xtraTabPage动态添 ...
- C语言入门教程-(6)运算符
1.运算符概述 运算符是一种编译器执行特定的数学或逻辑操作的符号.C语言提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 条件运算符 其他运算符 2.算术运算符 算术 ...
- cetus系列~ cetus+mha
一 简介:mha+cetus高可用架构二 环境 1 mysql 5.7 并行复制+GTID 2 cetus最新版 3 mha0.57二 安装 1 安装mha-rpm包 2 做免密认证 3 ...
- [转]C++11的enum class & enum struct和enum
1. 旧版enum存在的问题 问题 描述 1 向整形的隐式转换(Implicit conversion to an integer) 2 无法指定底层所使用的数据类型(Inability to spe ...
- android 服务解析
https://blog.csdn.net/luoyanglizi/article/details/51586437 2.service和Thread的区别 定义上: thread是程序运行的最小单元 ...
- Dubbo重试次数
服务超时后重试次数[retries],不包含第一次调用,0代表不重试 *我们应该在幂等方法上设置重试次数[查询.删除.修改],在非幂等方法上禁止设置重试次数. ★幂等:指多次运行方法所产生的最终效果是 ...