day26—JavaScript对CSS样式的获取和修改实践

转行学开发，代码100天——2018-04-11

通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。

如：

行内样式：

    <div id="box" style=" 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=" 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条件语句实现。

obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

    //获取样式
        function getStyle(obj){
            alert(obj.currentStyle);//考虑兼容性问题
            if (obj.currentStyle) {
                alert(obj.currentStyle.width);
            }else{
                alert(getComputedStyle(obj,false).width);
            }
        }

优化该函数后如下：

    //获取样式
        function getStyle(obj,name){
            // alert(obj.currentStyle);//考虑兼容性问题
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

但是currentStyle() 与getComputedStyle() 方式只能用于获取样式，而不能设置样式

此外：

currentStyle()方式只能获取简单样式（height，width等），不能用于获取复合样式（border,background）等，若需要获取背景颜色，可以用backgroundcolor

总结：

1.行内样式：obj.style.属性

2.非行内样式:obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8

3.兼容性问题基本上都是通过if...else条件语句实现

4.currentStyle（）方式不能获取复合样式。