day26—JavaScript对CSS样式的获取和修改实践
Posted 东易韦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了day26—JavaScript对CSS样式的获取和修改实践相关的知识，希望对你有一定的参考价值。
转行学开发，代码100天——2018-04-11
通过javascript获取和修改html元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。
如：
行内样式：
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
外部样式：
<link rel="stylesheet" type="text/css" href="ccss.css">
内嵌样式：
<style type="text/css"> #div{width:100px;height:100px;background:red;} </style>
对于样式的获取也因其写入方式不同而有所区别：
对于行内样式的获取，用 obj.style.属性方式
如下面的一个获取和修改行内样式的案例：
<!DOCTYPE html> <html> <head> <title>JavaScript获取样式的方式</title> <script type="text/javascript"> //css样式获取和修改方法，两个参数时，获取；三个参数时修改 function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; }else { arguments[0].style[arguments[1]] = arguments[2]; } } //封装获取元素方法 function $(id){return document.getElementById(id);} window.onload =function () { var box = $(‘box‘); alert(css(box,"width"));//获取 css(box,"width","200px");//设置属性 } </script> </head> <body> <div id="box" style="width: 100px;height: 100px;background:#ccc"></div> </body> </html>
通过css函数技能获取样式也能修改样式，其前提是基于获取的HTML对象obj
function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; //获取样式 }else { arguments[0].style[arguments[1]] = arguments[2]; //修改样式 } }
为了使用方便，提升函数的通用性，可以将该函数进一步优化，增加obj,name,value参数
//css样式获取和修改方法，两个参数时，获取；三个参数时修改 function css(obj,name,value){ // alert(arguments[0]); //arguments[0]=obj if (arguments.length==2) { return obj.style[name]; //获取样式 }else { obj.style[name] = value; //修改样式 } }
非行间样式：obj.style.属性 方式并不适用与非行间样式
“好东西一般不兼容”
在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题，而浏览器的兼容性问题一般都是通过if..else条件语句实现。
currentStyle() 兼容IE6、7、8
getComputedStyle()不兼容IE6、7、8
以上是关于day26—JavaScript对CSS样式的获取和修改实践的主要内容，如果未能解决你的问题，请参考以下文章