คุณสมบัติสไตล์ HTML DOM
ตัวอย่าง
เพิ่มสีแดงให้กับ <h1> องค์ประกอบ:
document.getElementById("myH1").style.color = "red";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ style ส่งคืนอ็อบเจ็กต์ CSSStyleDeclaration ซึ่งแสดงถึงแอตทริบิวต์ style ขององค์ประกอบ
คุณสมบัติสไตล์ใช้เพื่อรับหรือตั้งค่าสไตล์เฉพาะขององค์ประกอบโดยใช้คุณสมบัติ CSS ที่แตกต่างกัน
หมายเหตุ:เป็นไปไม่ได้ที่จะกำหนดรูปแบบโดยการกำหนดสตริงให้กับคุณสมบัติสไตล์ เช่นองค์ประกอบ .style = "color: red;" ในการตั้งค่ารูปแบบขององค์ประกอบ ให้ผนวกคุณสมบัติ "CSS" เข้ากับรูปแบบและระบุค่าดังนี้:
element.style.backgroundColor = "red"; // set the background color of an element to red
อย่างที่คุณเห็น ไวยากรณ์ JavaScript สำหรับการตั้งค่าคุณสมบัติ CSS นั้นแตกต่างจาก CSS เล็กน้อย (backgroundColor แทนที่จะเป็น background-color)
สำหรับรายการคุณสมบัติที่มีอยู่ทั้งหมด โปรดดู การอ้างอิงออบเจ กต์สไตล์ ของเรา
หมายเหตุ:คุณสมบัติ style จะส่งคืนเฉพาะการประกาศ CSS ที่ตั้งค่าในแอตทริบิวต์สไตล์อินไลน์ขององค์ประกอบ เช่น
<p style="color: red;"> ไม่สามารถใช้คุณสมบัตินี้เพื่อรับข้อมูลเกี่ยวกับกฎของสไตล์จากส่วน <head> ในเอกสารหรือสไตล์ชีตภายนอก
อย่างไรก็ตาม คุณสามารถเข้าถึงองค์ประกอบ <style> จาก <head> โดยใช้ document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
หมายเหตุ:ขอแนะนำให้ใช้คุณสมบัติ style แทนองค์ประกอบ .setAttribute("style", "...")เนื่องจากคุณสมบัติ style จะไม่เขียนทับคุณสมบัติ CSS อื่นๆ ที่อาจระบุไว้ในแอตทริบิวต์ style
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
คุณสมบัติสไตล์การส่งคืน:
element.style.property
ตั้งค่าคุณสมบัติสไตล์:
element.style.property = value
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
รายละเอียดทางเทคนิค
| คืนมูลค่า: | ออบเจ็กต์ CSSStyleDeclaration แสดงถึงแอตทริบิวต์สไตล์ขององค์ประกอบ |
|---|---|
| เวอร์ชัน DOM | Dom ระดับ 2 CSS |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
รับค่าของขอบบนขององค์ประกอบ <p>:
var x = document.getElementById("myP").style.borderTop;
หน้าที่เกี่ยวข้อง
กวดวิชา CSS : กวดวิชา CSS
การอ้างอิง CSS: คุณสมบัติ CSS
การอ้างอิง HTML DOM: การอ้างอิงออบเจกต์สไตล์
อ้างอิง HTML: แท็ก <style> HTML
❮ วัตถุธาตุ