CSS DOM动态样式ANMELDUNG
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

CSS DOM动态样式

CSS DOM动态样式

  • 使用JS操作CSS中的各属性。

  • JS只能操作或修改行内样式。如：imgObj.style.border = “1px solid red”

  • 对于类样式，通过className来赋值。如：imgObj.className = “imgClass”

style对象

  • 每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。

  • 那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。

  • 因此，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>
nächsten Abschnitt
<!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>
einreichenCode zurücksetzen
KapitelKursunterlagen