การจัดสไตล์องค์ประกอบด้วย JavaScript

สมมติว่ามีหลายย่อหน้า:

<p>text1</p>
<p>text2</p>
<p>text3</p>

มาไล่ลูปผ่านย่อหน้าเหล่านี้และเพิ่มลิงก์ที่ส่วนท้ายของ แต่ละย่อหน้า โดยเมื่อคลิกที่ลิงก์ ข้อความของย่อหน้าจะได้รับการจัดสไตล์เพิ่มเติม บางอย่าง เช่น ข้อความของย่อหน้าจะกลายเป็นถูกขีดทับ (ทำได้โดย คุณสมบัติ CSS text-decoration)

มาพูดถึงสองประเด็นของงานนี้

ประการแรก ตามที่ได้กล่าวถึงในบทเรียนก่อนหน้า ไม่ควรเปลี่ยนสไตล์ของย่อหน้าโดยตรง ผ่าน JavaScript – จะสะดวกกว่ามาก ที่จะเพิ่มคลาส CSS บางอย่าง

ประการที่สอง เมื่อทำภารกิจนี้คุณ จะพบกับความประหลาดใจบางอย่าง เพื่อทำความเข้าใจ แก่นแท้ของมัน มาดูโค้ด HTML ของย่อหน้า หลังจากเพิ่มลิงก์:

<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>

ลองนึกภาพตอนนี้ว่า เมื่อคลิกที่ลิงก์ ข้อความของย่อหน้าจะถูกขีดทับ อย่างไรก็ตาม ลิงก์ ในกรณีนี้ก็เป็นส่วนหนึ่งของย่อหน้า และจะถูกขีดทับด้วย! เป็นไปได้มากว่าผลลัพธ์ แบบนี้เราไม่ต้องการ เราต้องการให้ข้อความ ถูกขีดทับ แต่ลิงก์ – ไม่

เพื่อแก้ปัญหา ก็แค่ห่อ ข้อความของย่อหน้าด้วยแท็ก span แบบนี้:

<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>

กำหนดให้โค้ด HTML ต่อไปนี้:

<p>text1</p>
<p>text2</p>
<p>text3</p>

เพิ่มลิงก์ที่ส่วนท้ายของแต่ละย่อหน้า โดย เมื่อคลิกที่ลิงก์ ข้อความของย่อหน้าจะถูกขีดทับ (แต่ลิงก์ – ไม่)

ปรับเปลี่ยนงานก่อนหน้า เพื่อให้ หลังจากคลิกที่ลิงก์แล้ว ลิงก์นั้นจะถูกลบออก จากย่อหน้า (และข้อความของย่อหน้าจะกลายเป็นถูกขีดทับ)

กำหนดให้ตาราง HTML บางส่วน เพิ่มเข้าไปใน ตารางนี้อีกหนึ่งคอลัมน์ที่มีลิงก์ เมื่อคลิก ที่ลิงก์นี้ แถวที่มีลิงก์นี้ควรกลายเป็น พื้นหลังสีเขียว

ปรับเปลี่ยนงานก่อนหน้า เพื่อให้ การคลิกลิงก์ครั้งแรกจะทาสีแถวเป็นพื้นหลังสีเขียว และคลิกครั้งที่สองจะยกเลิกการกระทำนี้