JavaScript获取非行间样式/定义样式
html节点的样式分为以下几种
(1)浏览器默认样式
(2)引用样式(引用外部css文件的样式、style标签内定义的样式)
引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css">
style标签内:<style> width:100px; </style>
(3)行间样式(节点style属性定义的样式)比如:<div style="width:100px;"></div> 有些童鞋会问:为什么要获取“非行间样式”?
有时候在用JS动态设置一个元素的样式的时候要同时考虑style="display:none"和样式表里面的elem {display:none}这两种情况。举个简单的例子说明:如果单击一个按钮让一个div元素显示或隐藏(单击按钮时如果div默认是隐藏的就显示,反之隐藏)。首先要获取div元素默认的显示状态,如果这时只获取行间样式而样式表里设置了DIV元素的display的话获取的样式就不那么准确。所以除了行间样式外样式表内的非行间样式也要同时获取才行。 下面就是获取非行间样式的示例: HTML代码:
<style>
*{ text-align:center;}
input{ margin-top:30px; padding:10px 20px;}
#div1{ width:500px; height:300px; background:red; margin:10px auto;}
</style> <input type="button" value="style" id="btn" />
<div id="div1"></div>
javascript代码如下:
<script>
//获取非行间css样式
function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
//为对象写入/获取css样式
function css(obj,attr,value){ //对象,样式,值。传2个参数的时候为获取样式,3个是设置样式
if(arguments.length == 2){ //arguments参数数组,当参数数组长度为2时表示获取css样式
return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数
}else{
if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值
obj.style[attr] = value;
};
};
};
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(getStyle(oDiv,"height"));
css(oDiv,"background","green");
alert(css(oDiv,"width"));
};
};
</script>
JavaScript获取非行间样式/定义样式的更多相关文章
- JavaScript获取非行间样式
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js兼容总结之获取非行间样式
非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...
- JS获取非行间样式及兼容问题
获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- js获取非行间样式/写入样式(行间)
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- 获取非行间样式getComputedStyle
有如下代码: 1 2 3 div { width: 200px; } 1 2 3 <div id="aa" style="height: 100px;&qu ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
随机推荐
- 启用PowerShell Web Access
Windows PowerShell Web Access(PSWA)是 Windows Server 2012 中的新功能,充当 Windows PowerShell 网关,允许远程计算机基于 We ...
- Oracle Linux 6.3下安装Oracle 11g R2(11.2.0.3)
本文主要描写叙述了在Oracle Linux 6.3下安装Oracle 11gR2(11.2.0.3).从Oracle 11g開始,Oracle官方站点不再提供其Patch的下载链接,须要使用Meat ...
- 分布式助手Zookeeper(四)
分布式助手Zookeeper(四)博客分类: Zookeeper zookeeper配置同步zookeeper编程 Zookeeper是分布式环境下一个重要的组件,因为它能在分布式环境下,给我带来很多 ...
- Redis学习手册(Hashes数据类型)
一.概述: 我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Ag ...
- How does CCFileUTils::fullPathForFilename work
OverView The purpose of this document is show you how does function CCFileUtils::fullPathForFilename ...
- Android 自定义View修炼-Android实现圆形、圆角和椭圆自定义图片View(使用BitmapShader图形渲染方法)
一.概述 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的.实现圆角图片的方法其实不少,常见的就是利用Xfermode,Shader.本文直接继 ...
- R-大数据分析挖掘(5-R基础回顾)
(一)R函数 R是一种解析型语言,输入后可直接获取结果 函数(输入参数,参数) R的函数分为“高级”和“低级函数” • 高级函数可调用低级函数 • 高级函数称为泛型函数 • 函数名 <-‐ ...
- 读《编写高质量代码:改善JavaScript程序的188个建议》1
建议3:减少全局变量污染 定义全局变量有3种方式: ❑在任何函数外面直接执行var语句. var f='value'; ❑直接添加一个属性到全局对象上.全局对象是所有全局变量的容器.在Web浏览器中, ...
- String类概述
(1)多个字符组成的一串数据. 其实它可以和字符数组进行相互转换. (2)构造方法: A:public String() B:public String ...
- SQL server 2012 如何取上个月的最后一天
好吧 QQ群里被问到这种问题,还是这里写一下吧. DECLARE @date DATETIME = getdate(); SELECT EOMONTH (@date) AS 'Last Day Of ...