บทความนี้อธิบายการแก้ปัญหาสไตล์ที่ไม่ถูกต้อง Display = "" ใน JS แบ่งปันสำหรับการอ้างอิงของคุณ ทางออกเฉพาะมีดังนี้:
1. คำอธิบายปัญหา:
ใน JS บางครั้งเราต้องการควบคุม DIV แบบไดนามิกเพื่อแสดงหรือซ่อนหรือมากกว่าการดำเนินการ แต่ถ้าเรา style.display = "" อาจส่งผลให้ไม่มีผล
ดูรหัสต่อไปนี้:
คัดลอกรหัสดังนี้: <style>
#ชื่อ
-
แสดง: ไม่มี;
-
</style>
</head>
<body>
<div id = "ชื่อ">
ฉันชื่อยิ้ม
</div>
</body>
</html>
<script>
window.onload = function () {
document.getElementById ('ชื่อ'). style.display = "";
การแจ้งเตือน ("ทดสอบ");
-
</script>
CSS กำหนด DIV ด้วยชื่อ ID ที่ซ่อนอยู่และหลังจากโหลดหน้าเว็บแล้วเราใช้ JS เพื่อควบคุมการแสดงผลของ ID มีข้อผิดพลาดในการเขียนสิ่งนี้หรือไม่?
มีข้อผิดพลาดหรือไม่? แต่ทำไมอินเทอร์เฟซยังว่างอยู่?
2. โซลูชัน:
โปรดจำไว้ว่ามีการใช้งานอีก XXX.style.display = "บล็อก" จากนั้นลองมาลองดูสิ
อนิจจามันแสดงให้เห็นจริง! - -
จากนั้นให้ตรวจสอบความแตกต่างระหว่าง style.display = "" และ style.display = "block"
ในความเป็นจริงความแตกต่างที่ยิ่งใหญ่ที่สุดระหว่างสองสิ่งนี้คือบล็อกจะแสดงโดยบล็อกดังนั้นจะมีการแบ่งสาย ดังนั้นเนื่องจากมีความแตกต่างเพียงอย่างเดียวทำไมจึงสามารถแสดงในตัวอย่างนี้และอื่น ๆ ไม่ได้? กังวล.
โอเคไปที่ปัญหานี้ก่อน มาดูกันว่าเราแก้ปัญหาในปัญหาปัจจุบันได้อย่างไร นอกเหนือจากการใช้ style.display = "block" เพื่อแก้ปัญหายังมีอีกวิธีหนึ่ง:
คัดลอกรหัสดังนี้: <div id = "name" style = "display: none">
ฉันชื่อยิ้ม
</div>
<script>
document.getElementById ('ชื่อ'). style.display = "";
</script>
มันคือการใช้สไตล์ที่มีชื่อ id เพื่อสร้างลงในแท็กเพื่อให้สามารถแสดงได้ตามปกติโดยไม่คำนึงว่ามันจะแสดง = "" หรือแสดง = "บล็อก"!
ฉันหวังว่าคำอธิบายในบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคนตาม JavaScript