คุณสมบัติ style.quotes ของ HTML DOM ใช้สำหรับดึงหรือกำหนดประเภทเครื่องหมายคำพูดที่ใช้ล้อมรอบเนื้อหาในเอกสาร HTML
ไวยากรณ์ (Syntax)
การดึงค่า quotes
object.style.quotes
การกำหนดค่า quotes
object.style.quotes = "value"
ค่าที่รองรับ (Values)
| ค่า | คำอธิบาย |
|---|---|
inherit |
สืบทอดค่าคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
initial |
กำหนดค่าคุณสมบัติเป็นค่าเริ่มต้น |
none |
ใช้เครื่องหมายคำพูดเริ่มต้น (" ") สำหรับการอ้างอิง |
string string |
กำหนดเครื่องหมายคำพูดเอง โดยสองค่าแรกระบุระดับการล้อมรอบชั้นแรก และสองค่าถัดไประบุชั้นที่สอง |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยนเครื่องหมายคำพูดขององค์ประกอบ <q> ผ่าน JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
q {
margin: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 20px;
}
</style>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ DOM Style quotes</h1>
<q>I'm a q element with some dummy text.</q>
<button onclick="add()" class="btn">เปลี่ยนเครื่องหมายคำพูด</button>
<script>
function add() {
document.querySelector('q').style.quotes = "'#' '#'";
}
</script>
</body>
</html>
ผลลัพธ์
คลิกปุ่ม เปลี่ยนเครื่องหมายคำพูด เพื่อเปลี่ยนเครื่องหมายคำพูดของข้อความในองค์ประกอบ <q> จากค่าเริ่มต้นเป็นเครื่องหมาย #