Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengubah suai css dalam js asli
Bagaimana untuk mengubah suai css dalam js asli
- 醉折花枝作酒筹asal
- 2021-07-23 10:20:083500semak imbas
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>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>Hasil larian ialah:
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.className="active";</script>Hasil operasi yang sama ialah:
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!