ข้อความเป็นทรัพย์สินที่สำคัญและมองเห็นได้มากที่สุดสำหรับทุกแอปพลิเคชันหรือหน้าเว็บ หากไม่มีการใช้ข้อความ ผู้สร้างก็ไม่สามารถถ่ายทอดความคิดของเขาหรือส่งข้อมูลได้อย่างถูกต้อง เนื่องจากความต้องการและความสำคัญ การออกแบบสไตล์จึงกลายเป็นฝันร้ายสำหรับนักพัฒนาส่วนใหญ่ สำหรับข้อความคงที่ คุณสมบัติ CSS และเฟรมเวิร์กช่วยได้มาก แต่ก็ยังจำเป็นต้องมีคุณสมบัติที่สามารถนำไปใช้กับสไตล์แบบไดนามิกได้ โชคดีที่คุณสมบัตินี้จัดทำโดย JavaScript ที่มีชื่อ “ ข้อความการตกแต่ง '.
บล็อกนี้จะให้ขั้นตอนในการใช้สไตล์กับองค์ประกอบ HTML ผ่านทางคุณสมบัติ textDecoration
วิธีการใช้สไตล์โดยใช้คุณสมบัติ textDecoration สไตล์ HTML DOM
สไตล์ DOM” ข้อความการตกแต่ง ” โดยพื้นฐานแล้วคุณสมบัติจะทำการจัดแต่งทรงผมเหมือนกับการเพิ่ม “ ขีดเส้นใต้”, “โอเวอร์ไลน์”, “เส้นผ่าน” และ “กะพริบ” ” เหนือองค์ประกอบที่เลือก คุณสมบัตินี้เมื่อตั้งค่าเป็น “ ไม่มี ” ลบสไตล์เริ่มต้นที่ใช้กับองค์ประกอบนั้นเช่นแท็กจุดยึด
ไวยากรณ์
ไวยากรณ์สำหรับคุณสมบัติ textDecoration สไตล์ DOM คือ:
eleObj. สไตล์ . ข้อความการตกแต่ง = 'ไม่มี|โอเวอร์ไลน์|กะพริบตา|ขีดเส้นใต้|เริ่มต้น|บรรทัดผ่าน|สืบทอด'
เยี่ยมชมตารางด้านล่างเพื่อรับแนวคิดอย่างรวดเร็วเกี่ยวกับค่าที่สามารถกำหนดให้กับ ' ข้อความการตกแต่ง ' คุณสมบัติ:
| ค่า | คำอธิบาย |
|---|---|
| ไม่มี | แปลงข้อความเป็นรูปแบบธรรมดาเพื่อลบสไตล์ที่กำหนดไว้ล่วงหน้าทั้งหมด มันเป็นค่าเริ่มต้น |
| โอเวอร์ไลน์ | แทรกบรรทัดไว้เหนือหรือด้านบนของข้อความที่เลือก |
| กระพริบตา | ทำให้ข้อความกะพริบแต่บางเว็บเบราว์เซอร์ไม่รองรับ |
| ขีดเส้นใต้ | โดยวางบรรทัดไว้ใต้หรือด้านล่างของข้อความที่เลือก |
| อักษรย่อ | ตั้งค่าคุณสมบัติที่ใช้เป็นค่าเริ่มต้นซึ่งไม่มีในกรณีของเรา |
| เส้นผ่าน | วางบรรทัดที่กึ่งกลางของข้อความ เช่น ระหว่างข้อความ |
| คุณได้รับมรดก | สืบทอดคุณสมบัติที่ใช้กับองค์ประกอบรากหรือองค์ประกอบหลัก |
ตอนนี้ เรามาดูกระบวนการนำไปใช้และผลกระทบต่อข้อความสำหรับแต่ละค่าของ “ ข้อความการตกแต่ง ' คุณสมบัติ.
ตัวอย่างที่ 1: คุณสมบัติ “textDecoration = none”
การนำไปปฏิบัติจริงของ “ ข้อความการตกแต่ง ” ทรัพย์สินที่มีมูลค่าเท่ากับ “ ไม่มี ” จะมีการอธิบายไว้ในโค้ดด้านล่าง:
< ร่างกาย >
< ศูนย์ >
< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์ < / h1 >
< ปุ่ม เมื่อคลิก = 'ผู้สมัครงาน()' > แอพลิเยร์ < / ปุ่ม >
< พี > เมื่อค่าของคุณสมบัติ textDecoration ถูกตั้งค่าเป็น none: < / พี >
< h3 รหัส = 'กรณีการใช้งาน' สไตล์ = 'การตกแต่งข้อความ: โอเวอร์ไลน์;' > องค์ประกอบเป้าหมาย < / h3 >
< / ศูนย์ >
< สคริปต์ >
ฟังก์ชั่น Applier() {
document.getElementById('useCase').style.textDecoration = 'ไม่มี';
}
< / สคริปต์ >
< / ร่างกาย >
คำอธิบายของรหัสที่ระบุไว้ข้างต้น:
- ขั้นแรก ใช้เครื่องหมาย “< ปุ่ม >” เพื่อสร้างปุ่มและกำหนดให้เป็นผู้ฟังเหตุการณ์ของ “ เมื่อคลิก '. Listener เหตุการณ์นี้เรียกใช้ฟังก์ชัน JavaScript ชื่อ “ แอพลิเยร์ '.
- จากนั้นสร้างองค์ประกอบเป้าหมาย “ h3 ” และกำหนด ID เฉพาะของ “ ใช้กรณี '. นอกจากนี้ให้ใช้ CSS “ การตกแต่งข้อความ ” ทรัพย์สินนั้นมีมูลค่าเท่ากับ “ โอเวอร์ไลน์ ” ด้วยความช่วยเหลือของ “ สไตล์ ' คุณลักษณะ.
- ตอนนี้ป้อน “ แอพลิเยร์ ()” เนื้อความของฟังก์ชั่นและเลือกองค์ประกอบเป้าหมายผ่านรหัสของมัน” ใช้กรณี ” และแนบสไตล์ “ ข้อความการตกแต่ง ' คุณสมบัติ.
- หลังจากนั้นให้กำหนดคุณสมบัติเป็นค่า “ ไม่มี ” เพื่อลบรูปแบบการตกแต่งข้อความที่นำไปใช้ล่วงหน้าเหนือองค์ประกอบ
มุมมองของหน้าเว็บหลังจากการรันโค้ดข้างต้น:
ผลลัพธ์แสดงการจัดสไตล์ล่วงหน้าที่ใช้กับองค์ประกอบเป้าหมายจะถูกลบออกโดยการกำหนดค่าเป็น “ ไม่มี '.
ตัวอย่างที่ 2: คุณสมบัติ “textDecoration = เริ่มต้น”
ข้อมูลโค้ดด้านล่างนี้แสดงให้เห็นถึงการใช้งานของ “ ข้อความการตกแต่ง ” ทรัพย์สินเมื่อมูลค่าของ “ อักษรย่อ ” ได้รับมอบหมายให้:
< สคริปต์ >การทำงาน แอพลิเยร์ ( ) {
เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . สไตล์ . ข้อความการตกแต่ง = 'อักษรย่อ' ;
}
สคริปต์ >
ผลลัพธ์ที่สร้างขึ้นหลังจากการคอมไพล์โค้ดข้างต้นแสดงไว้ด้านล่าง:
ผลลัพธ์ข้างต้นแสดงให้เห็นว่าค่าของการตกแต่งข้อความถูกตั้งค่าเป็นค่าเริ่มต้นซึ่งก็คือ “ ไม่มี ” และด้วยเหตุนี้ การปรับสไตล์ล่วงหน้าทั้งหมดจึงถูกเปลี่ยนกลับ
ตัวอย่างที่ 3: คุณสมบัติ “textDecoration = overline”
รหัสด้านล่างแสดงให้เห็นถึงการใช้งานจริงของ “ ข้อความการตกแต่ง ” ทรัพย์สินเมื่อมูลค่าของ “ โอเวอร์ไลน์ ” มอบให้:
< ร่างกาย >< ศูนย์ >
< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์ < / h1 >
< ปุ่ม เมื่อคลิก = 'ผู้สมัครงาน()' > แอพลิเยร์ < / ปุ่ม >
< พี > เมื่อค่าของคุณสมบัติ textDecoration ถูกตั้งค่าเป็นโอเวอร์ไลน์: < / พี >
< h3 รหัส = 'กรณีการใช้งาน' > องค์ประกอบเป้าหมาย < / h3 >
< / ศูนย์ >
< สคริปต์ >
ฟังก์ชั่น Applier() {
document.getElementById('useCase').style.textDecoration = 'โอเวอร์ไลน์';
}
< / สคริปต์ >
< / ร่างกาย >
คำอธิบายของโค้ดข้างต้นระบุไว้ด้านล่าง:
- ประการแรก “ ปุ่ม” และ “h3 องค์ประกอบ ' ถูกสร้างขึ้นในลักษณะเดียวกันและคุณสมบัติ CSS ที่ถูกนำไปใช้กับ “h3” ตอนนี้องค์ประกอบถูกลบออกแล้ว
- ถัดมาภายใน “ แอพลิเยร์ ” ฟังก์ชั่นองค์ประกอบเป้าหมายถูกเลือกและ “ ข้อความการตกแต่ง ” ทรัพย์สินที่มีมูลค่าเท่ากับ “ โอเวอร์ไลน์ ” ถูกกำหนดให้กับองค์ประกอบ
ผลลัพธ์หลังจากการรันโค้ดข้างต้นจะแสดงอยู่ด้านล่าง:
ผลลัพธ์จะแสดงผลกระทบของ “ textDecoration = โอเวอร์ไลน์ ” คุณสมบัติเหนือข้อความ
ตัวอย่างที่ 4: คุณสมบัติ “textDecoration = ขีดเส้นใต้”
การดำเนินการจริงของข้อความเมื่อค่าของ “ ขีดเส้นใต้ ” ถูกกำหนดให้เป็น “ ข้อความการตกแต่ง ” ทรัพย์สินระบุไว้ด้านล่าง:
< สคริปต์ >การทำงาน แอพลิเยร์ ( ) {
เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . สไตล์ . ข้อความการตกแต่ง = 'ขีดเส้นใต้' ;
}
สคริปต์ >
หลังจากการคอมไพล์ผลลัพธ์จะมีลักษณะดังนี้:
ผลลัพธ์แสดงว่ามีการเพิ่มบรรทัดที่ด้านล่างของข้อความ
ตัวอย่างที่ 5: คุณสมบัติ “textDecoration = line-through”
การนำภาพไปใช้ของ “ ข้อความการตกแต่ง ” ทรัพย์สินที่มีมูลค่าเท่ากับ “ เส้นผ่าน ” แสดงไว้ด้านล่าง:
< สคริปต์ >การทำงาน แอพลิเยร์ ( ) {
เอกสาร. รับ ElementById ( 'กรณีการใช้งาน' ) . สไตล์ . ข้อความการตกแต่ง = 'ผ่านเส้น' ;
}
สคริปต์ >
ผลลัพธ์ที่สร้างขึ้นสำหรับโค้ดข้างต้นแสดงอยู่ด้านล่าง:
ผลลัพธ์จะแสดงเอฟเฟกต์ที่ทำโดย “ เส้นผ่าน ” เหนือข้อความองค์ประกอบเป้าหมาย
บทสรุป
รูปแบบ HTML DOM “ ข้อความการตกแต่ง คุณสมบัติ” เกี่ยวข้องโดยเฉพาะกับการกำหนดสไตล์ขององค์ประกอบ HTML ผ่าน JavaScript เพื่อดำเนินการกำหนดสไตล์แบบไดนามิกบนองค์ประกอบข้อความ สามารถกำหนดค่าได้หลายค่าให้กับสิ่งนี้ “ ข้อความการตกแต่ง ” เพื่อแสดงสไตล์ที่แตกต่างกัน ค่าเหล่านี้คือ “ ไม่มี”, “โอเวอร์ไลน์”, “ขีดเส้นใต้”, “เส้นผ่าน”, “เริ่มต้น”, “กะพริบ” และ “สืบทอด '. บล็อกนี้ได้อธิบายกระบวนการที่นักพัฒนาซอฟต์แวร์สามารถใช้สไตล์ได้สำเร็จโดยใช้คุณสมบัติ textDecoration