脚本化css 脚本化内联样式 脚本化css类

时间：2021-07-17 08:44:54
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>脚本化css</title>
        <link rel="stylesheet" href="css/cssJavasript.css" />
        <style type="text/css">
            .current{
                background-color: #0ff;
            }
        </style>
    </head>
    <body>
        <div id="cssJs">0000000</div>
        <script type="text/javascript">
            var cssJs = document.getElementById("cssJs");
            
            /*脚本化内联样式
            更改单独的文档元素的style属性，style属性值不是字符串而是一个CSSStyleDeclaration对象
            * style对象的js属性代表html代码中通过style指定的css属性
            * 注意：要是css属性名包含多个连字符时，应格式移除连字符并将每个连字符后面紧接着的字符大写
            * 如：CSSStyleDeclaration.style.fontFamily = "sans-serif"*/
            cssJs.style.width = "200px";
            cssJs.style.height = "200px";
            cssJs.style.border = "1px solid #ccc";
            
            /**查询计算出样式 ff:getComputedStyle() ie:currentStyle
             * 用浏览器窗口对象的getComputedStyle()方法获得一个元素的计算样式
             * getComputedStyle(要获取计算样式的元素, null或者空字符如：":before,:after...")
             * 返回值是代表应用在指定元素上的所有样式*/
            
            console.log(getComputedStyle(cssJs, ""));
            grabAttention(cssJs);
            /*
             脚本化css类 className()
             * 好处：能在痛一时刻改变多个css属性
             * 缺点：只能设计一个类名，并会覆盖已存在的类
             * 不过HTML5解决了这个问题，可以使用classList设计多个类属性，需要注意的是，不是所有的浏览器都支持这个属性*/
            function grabAttention(e){//设计元素属性
                e.className = "current";
            }
            function releaseAttention(e){//清除元素属性
                e.className = "";
            }
            
            /*
             脚本化样式表
             * 两类使用对象 
             * 第一类 元素对象由<style>和<link>元素表示，一个包含一个是引用
             * 第二类 CSSStyleSheet对象表示样式表本身
             * 
             * 使用disabled属性设置类true样式表就被浏览器关闭并忽略*/</script>
    </body>
</html>

 

标签：

相关文章