CSS DOM動態樣式

CSS DOM動態樣式

#使用JS操作CSS中的各屬性。
JS只能操作或修改行內樣式。如：imgObj.style.border = “1px solid red”
對於類別樣式，透過className來賦值。如：imgObj.className = “imgClass”

物件

因此，style物件用來代替CSS。
如：imgObj.style.border = “1px solid red”;

### #########style物件屬性與CSS屬性的轉換###################### 如果是一個單詞，style物件屬性，與CSS屬性一樣。 ############ 如果是多個單字，第1單字全小寫，後面每個單字首字母大寫，並且去掉中劃線。 ##################divObj.style.backgroundColor = “red”;############ divObj.style.backgroundImage = “url(images /bg.gfi)”;############divObj.style.fontSize = “18px”;#########

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
            //网页加载完成
            window.onload = init;
            function init()
            {
                //获取id=img01的图片对象
                var imgObj = document.getElementById("img1");
                //给<img>标记添加行内样式
                imgObj.style.width = "400px";
                imgObj.style.border = "2px solid red";
                imgObj.style.padding = "20px 30px";
                imgObj.style.backgroundColor = "#f0f0f0";
            }
        </script>
    </head>
    <body >
        <img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
    </body>
</html>

新建檔案

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script type="text/javascript">
 //网页加载完成
 window.onload = init;
 function init()
 {
 //获取id=img01的图片对象
 var imgObj = document.getElementById("img1");
 //给<img>标记添加行内样式
 imgObj.style.width = "400px";
 imgObj.style.border = "2px solid red";
 imgObj.style.padding = "20px 30px";
 imgObj.style.backgroundColor = "#f0f0f0";
 }
 </script>
 </head>
 <body >
 <img id="img1" src="/upload/course/000/000/009/580af7f52278b486.jpg" />
 </body>
</html>

提交重置程式碼

自動運行

全螢幕