คุณสมบัติ style ขององค์ประกอบ DOM HTML

การระบุและการใช้งาน

style คุณสมบัติกลับค่าของคุณสมบัติ style ขององค์ประกอบในรูปแบบอ็อบเจก CSSStyleDeclaration。

อ็อบเจก CSSStyleDeclaration มีคุณสมบัติสไตล์ทั้งหมดขององค์ประกอบของเอลิเมนต์。มันไม่มีใน <head> คุณสมบัติสไตล์ที่ตั้งค่าโดยส่วนบุคคลหรือในแบบแบ่งปันแบบภายนอก

จุดสำคัญ 1

คุณไม่สามารถตั้งค่าสไตล์นี้:

element.style = "color:red";

คุณจำเป็นต้องใช้คุณสมบัติ CSS นี้:

element.style.backgroundColor = "red";

ทดลองด้วยตัวเอง

จุดสำคัญ 2

การใช้งานภาษาจาวาสคริปต์และภาษา CSS มีความแตกต่างเล็กน้อย:

backgroundColor / background-color

ดูที่ คู่มืออ้างอิง Style สมบัติทั้งหมด

จุดสำคัญ 3

ใช้คุณสมบัติ style นี้แทน วิธี setAttribute()เพื่อป้องกันการลบล้างคุณสมบัติอื่นในคุณสมบัติ style。

ดูเพิ่มเติมที่:

CSS ต่อราย

CSS คู่มืออ้างอิง

อ็อบเจก Style

HTML <style> ตาราง

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนสีของ "myH1":

document.getElementById("myH1").style.color = "red";

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ดูค่าของเส้นบรรทัดด้านบนของ "myP":

let value = document.getElementById("myP").style.borderTop;

ทดลองด้วยตัวเอง

โซต

กลับค่าคุณสมบัติ style:

element.style.property

ตั้งค่าคุณสมบัติ style:

element.style.property = value

ค่าคุณสมบัติ

ค่า เรียก
value

กำหนดค่าของคุณสมบัติ

เช่นนี้:

element.style.borderBottom = "2px solid red"

ค่าที่กลับมา

ประเภท เรียก
อ็อบเจก เป็นอ็อบเจกท์ CSSStyleDeclaration ขององค์ประกอบ。

การสนับสนุนของบราวเซอร์

element.style เป็นคุณสมบัติของ DOM Level 2 (2001)。

ทุกบราวเซอร์ทุกตัวสนับสนุนมันอย่างเต็มที่:

เชิร์น อีอี เอดจ์ ฟากซ์ เซฟาฟาย โอเปร่า
เชิร์น อีอี เอดจ์ ฟากซ์ เซฟาฟาย โอเปร่า
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน