js——行间样式与非行间样式
程序员文章站
2022-07-04 21:19:30
...
对于行间样式与非行间样式，这里做一下总结，方便大家查阅。
首先提下两个概念：行间样式与非行间样式
行间样式：行间样式就是写在标签体内的样式：如，<div style="color:red"></div>，在这里color样式就是行间样式。
非行间样式：非行间样式就是指不是写在标签体内的style属性的样式。如<style>....</style>内的定义的样式或引用的外部css文件都是非行间样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间样式与非行间样式</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{ font-size:20px; color:black;}
</style>
</head>
<body>
<div id="box" style="color:red;">China</div>
</body>
<script>
//js代码
</script>
</html>js中获取CSS样式有以下两种方法：
1、获取行间样式 （可读可写）
var oBox = document.getElementById('box');
console.log(oBox.style.color); // red
console.log(oBox.style.fontSize); // '' obj.style[attr] 只能获取行间样式，不能获取非行间样式
oBox.style.color = 'black'; 2、获取非行间样式 只读 (返回的是当前元素应用的最终CSS属性值（包括外链CSS文件，标签中嵌入的style属性等）)
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};3、行间样式（ele.style） 与 非行间样式（getComputedStyle或currentStyle） 的区别
a、ele.style 只能读取行间样式，而getComputedStyle或currentStyle获取的是 元素最终的css样式；
b、ele.style 是可读可写的，而getComputedStyle或currentStyle 是只读的；
console.log(getStyle(oBox,'color'))
参考链接：
http://www.jb51.net/article/92551.htm
http://www.cnblogs.com/JamKong/p/4967815.html
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
下一篇： 获取非行间样式