Bagaimana untuk mengubah suai css dalam js asli-tutorial css-php.cn

Bagaimana untuk mengubah suai css dalam js asli

醉折花枝作酒筹

Lepaskan： 2023-01-07 11:45:18

asal

3526 orang telah melayarinya

Kaedahnya ialah: 1. Melalui node.style.cssText="css expression 1; css expression 2; css expression 3" 2. Mula-mula tetapkan kelas tertentu dalam Style sheet style CSS, dan kemudian lampirkan tetapan gaya kelas kepada nod nod melalui node.classname="class name".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Di bawah saya akan memperkenalkan kepada anda dua cara untuk menukar gaya CSS dalam js asli:

1Oleh node.style.cssText="css expression 1; css expression 2; css expression 3 " untuk terus menukar gaya CSS.

2Mula-mula tetapkan gaya untuk kelas tertentu seperti "kelas aktif" dalam helaian gaya CSS (kelas aktif di sini diandaikan dan tidak wujud buat masa ini), dan kemudian dalam kod javascript Melalui node.classname="active", tetapan gaya kelas aktif dalam helaian gaya CSS dilampirkan pada nod nod.

Berikut ialah pengenalan terperinci, pertama ialah kod html:

<style type="text/css">
           div {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <div class="root">
      </div>
</body>

Salin selepas log masuk

Mula-mula gunakan kaedah pertama yang dinyatakan di atas untuk menukar gaya css dan tulis kod javascript berikut:

<script type="text/javascript">  
          var root=document.getElementsByClassName("root")[0];
       root.style.cssText="background-color: blue;color: #fff;";
 </script>

Salin selepas log masuk

Hasil larian ialah:

Bagaimana untuk mengubah suai css dalam js asli

Kemudian gunakan kaedah kedua yang disebutkan di atas untuk menukar gaya css dan tulis kod javascript berikut:

<script type="text/javascript">  
       var root=document.getElementsByClassName("root")[0];
           root.className="active";</script>

Salin selepas log masuk

Hasil operasi yang sama ialah:

Bagaimana untuk mengubah suai css dalam js asli

Ringkasan: Keputusan kedua-dua kaedah ini adalah sama, tetapi dari segi proses operasi, kaedah kedua ialah Kaedah "node.classname" memisahkan penulisan css dan js, yang jelas lebih munasabah dan teratur. Jika pernyataan css agak mudah, tidak ada perbezaan antara kedua-dua kaedah, tetapi jika pernyataan css agak kompleks, jelas kaedah kedua adalah lebih berkaedah.

Pembelajaran yang disyorkan:

tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai css dalam js asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!