简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Penggayaan dinamik DOM CSS

Gaya dinamik CSS DOM

  • Gunakan JS untuk mengendalikan setiap atribut dalam CSS.

  • JS hanya boleh mengendalikan atau mengubah suai gaya sebaris. Contohnya: imgObj.style.border = “1px solid red”

  • Untuk gaya kelas, tetapkan nilai melalui className. Contohnya: imgObj.className = “imgClass”

objek gaya

  • Setiap teg HTML mempunyai atribut gaya. Tetapi atribut gaya ini juga merupakan objek gaya.

  • Jadi, apakah sifat-sifat objek gaya ini? Atribut objek gaya sepadan dengan atribut dalam CSS satu sama satu.

  • Oleh itu, objek gaya digunakan dan bukannya CSS.

  • Contohnya: imgObj.style.border = “1px pepejal merah”;

Penukaran atribut objek gaya dan atribut CSS

  • Jika ia adalah perkataan, atribut objek gaya dan Atribut CSS Sama.

  • Jika terdapat berbilang perkataan, perkataan pertama hendaklah semuanya huruf kecil, huruf pertama setiap perkataan berikutnya hendaklah menggunakan huruf besar dan garis bawah hendaklah dialih keluar.

  • 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>
Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  491953 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！