JavaScript基础练习源码（三）css脚本化相关

sshong 发表于2013年5月3日 19:12:45 更新于2013年5月3日 19:14:01

众所周知，css有几种方式定义，按照优先级从低到高分别是：
1、引用外部css文件，<link>方式。
2、直接写在html head中的css代码，<style>方式。
3、直接写在html元素的style属性中，<a style='color:red'>方式，也称为内联方式。
1、2的方式可以在html元素中设置属性id、class等，在css中可以根据id或者class进行选择。

在前端开发中，经常会用到js来操控css以达到某些动态效果。
通常，用得最多的就是通过js操控内联样式以及class属性。

1、js操控内联样式，即html元素的style属性
元素的style属性是一个CSSStyleDeclaration对象，可以用js来操控它。
这个对象的属性跟css中定义的属性一一对应（下划线改为驼峰命名，如font-size在js中设置改为fontSize）。

1.1 设置style的某子属性，局部更新style

ele.style.color = 'green';

1.2 设置style的cssText，整体替换style

ele.style.cssText = 'color:blue;';

1.3 通过getAttribute('style') setAttribute('style', XXX)，整体替换style

ele.setAttribute('style', 'color:red;');

2、js操控html元素的css类，即html元素的class属性
2.1 直接通过js设置元素的className属性，整体替换class

ele.className = 'big red';

2.2 通过getAttribute('class') setAttribute('class', XXX)，整体替换class

ele.setAttribute('class', 'big red');

2.3 html5定义了classList属性，这个属性是一个含有add、remove等方法的对象，可以增加删除一些class来达到操控class属性的目的。局部更新class

ele.classList.add('big');

参考如下代码：

<html>
<head>
    <title>test js access css(www.asarea.me)</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <style type="text/css">
        .big {
            font-size: 20px;
        }
        .small {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var ele = document.getElementById('redDiv');

        //1、设置style的某子属性
        ele.style.color = 'green';
        console.log(ele.style.cssText);

        //2、设置style的cssText整体替换
        ele.style.cssText = 'color:blue;';
        console.log(ele.style.cssText);

        //3、get setAttribute('style')
        ele.setAttribute('style', 'color:red;');
        console.log(ele.style.cssText);

        //
        document.getElementById('btnBig').addEventListener('click', function() {
            //1、设置属性
            ele.className = 'big';
            console.log(ele.className);
            //2、get setAttribute
            ele.setAttribute('class', 'big');
            console.log(ele.getAttribute('class'));
        });
        document.getElementById('btnSmall').addEventListener('click', function() {
            //1、设置属性
            ele.className = 'small';
            console.log(ele.className);
            //2、get setAttribute
            ele.setAttribute('class', 'small');
            console.log(ele.getAttribute('class'));
        });

        //动画
        var animationId = false;
        document.getElementById('btnAnimation').addEventListener('click', function() {
            if(!animationId) {
                animationId = setInterval(animate, 100);
            }
            else {
                clearInterval(animationId);
                animationId = false;
            }
        });
        function animate() {
            var colors = ['red', 'blue', 'green', 'gray', 'black', 'yellow'];
            var i = Math.floor(Math.random() * colors.length);
            ele.style.color = colors[i];
        }
    }
    </script>
</head>
<body>
    <div id='redDiv'>
        check the text color!
    </div>
    <button id='btnBig'>大</button>
    <button id='btnSmall'>小</button>
    <button id='btnAnimation'>动画</button>
</body>
</html>

运行结果如下：

标签：无分类：JS&Html5阅读：2381

旧一篇：JavaScript基础练习源码（二）Event事件相关新一篇：客户端javascript标准时间线

暂无评论

添加评论

联系我

分类

琐碎文字 As3&Flex RIA UG English CodingArt C++ PHP Webserver E音乐盒 Unity3d C# JS&Html5 Tools mobile golang