masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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)  492829 permainan