หลังจากอ่าน "วิธีการใช้งานของการสร้างหรือเพิ่มแผ่นสไตล์ CSS แบบไดนามิกด้วย JavaScript" มันเป็นเรื่องง่ายสำหรับคุณที่จะหาวิธีปรับเปลี่ยนแผ่นสไตล์ CSS
ฉันพบเพื่อนในฟอรัมวันนี้ถามคำถามนี้:
<style> .ls {width = 120px;} </style> <script> // เพิ่มประโยคที่นี่เพื่อเปลี่ยนค่าความกว้างใน. ls วิธีการเขียน </script>เพื่อนบางคนตอบว่า: "หากมีวัตถุมากมายที่ใช้. ls มันไม่สะดวกที่จะใช้ JS jQuery นั้นสะดวก $ (". ls ") ความกว้าง (200); ไม่เป็นไร"
เขาต้องการใช้ตัวเลือกคลาสของ JQ เพื่อเลือกวัตถุทั้งหมดที่ใช้สไตล์นี้และปรับมันทีละตัวแทนที่จะเปลี่ยนแผ่นสไตล์ CSS ดังนั้นจึงมีข้อกังวลเกี่ยวกับ "วัตถุจำนวนมาก"
แต่ปัญหาคือสิ่งนี้จะเปลี่ยนรูปแบบการแสดงออกเฉพาะของวัตถุเหล่านั้นไม่ใช่การตั้งค่า. LS หากองค์ประกอบอื่นที่ใช้สไตล์. ls ปรากฏขึ้นมันจะยังคงเหมือนเดิม คุณยังต้องปรับองค์ประกอบนี้อีกครั้งเพื่อรักษาอาการ แต่ไม่ใช่สาเหตุที่แท้จริง ยิ่งไปกว่านั้นวิธีนี้ยังกำหนดว่าเป็นไปไม่ได้ที่จะบรรลุผลง่ายๆในประโยคเดียว
มีคนไม่กี่คนที่คิดเกี่ยวกับเรื่องนี้และถ้าคุณอ่านบทความ "วิธีการใช้งานของการสร้างหรือเพิ่มแผ่นสไตล์ CSS แบบไดนามิกด้วยจาวาสคริปต์" ฉันเชื่อว่าคุณจะคิดวิธีแก้ปัญหานี้ในประโยคเดียว องค์ประกอบที่เพิ่มเข้ามาใหม่ที่ใช้สไตล์นี้จะใช้การตั้งค่าที่แก้ไขโดยอัตโนมัติ ดังนั้นคุณได้เรียนรู้ความรู้ระดับสูงที่แตกต่างจากคนจำนวนมาก ให้ฉันอธิบายวิธีการโดยละเอียดด้านล่าง:
เนื่องจากตัวอย่างข้างต้นจึงไม่ง่ายที่จะเห็นผล ฉันได้เขียนอีกตัวอย่างด้านล่าง ง่ายกว่าที่จะเห็นเอฟเฟกต์ผ่านการเปลี่ยนสี:
<style> .TheForever {width: 50px; color: red;}#theforever {width: 150px; สี: เงิน;} </style> <dymes> มันควรจะเป็นสีแดงที่นี่ แต่มันจะเปลี่ยนเป็นสีเหลืองโดย JS ด้านล่าง อันที่จริงสิ่งนี้จะไม่เปลี่ยนแปลงเพียงเพื่อการเปรียบเทียบ </div> <script> document.stylesheets [0] .csstext = document.stylesheets [0] .csstext.replace (/red/g, "เหลือง"); </script>ตัวอย่างข้างต้นไม่ได้มุ่งเป้าไปที่ชื่อสไตล์ที่เฉพาะเจาะจง แต่สีทั่วไป (ถ้าคุณย้ายมันไปยังหน้า CSS ที่ซับซ้อนมากขึ้นด้วยคำสีแดงที่ไม่ได้ระบุสีสิ่งนี้สามารถนำไปสู่ข้อผิดพลาดได้ฉันมักจะรู้สึกเบื่อหน่ายกับการใช้รหัสที่ไม่ได้ใช้สมอง
จากด้านบนเราจะเห็นว่า document.stylesheets [0] .csstext เป็นเนื้อหาภายใน <style> </style> ทั้งหมดซึ่งเทียบเท่ากับตัวแปรสตริง ดังนั้นหากคุณต้องการเปลี่ยนการตั้งค่าสำหรับ. ls คุณจะต้องใช้ ".ls {width = 120px;}" เป็นส่วนทดแทนเพื่อแทนที่และ ".ls {width = 555px;}" เป็นเป้าหมายทดแทนและไม่เป็นไร
บทความข้างต้นเกี่ยวกับวิธีการปรับเปลี่ยนแผ่นสไตล์ CSS แบบไดนามิกด้วย JavaScript เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น