Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ HTML DOM Style quotes

คุณสมบัติ style.quotes ของ HTML DOM ใช้สำหรับดึงหรือกำหนดประเภทเครื่องหมายคำพูดที่ใช้ล้อมรอบเนื้อหาในเอกสาร HTML

ไวยากรณ์ (Syntax)

การดึงค่า quotes

object.style.quotes

การกำหนดค่า quotes

object.style.quotes = "value"

ค่าที่รองรับ (Values)

ค่า คำอธิบาย
inherit สืบทอดค่าคุณสมบัตินี้จากองค์ประกอบพาเรนต์
initial กำหนดค่าคุณสมบัติเป็นค่าเริ่มต้น
none ใช้เครื่องหมายคำพูดเริ่มต้น (" ") สำหรับการอ้างอิง
string string
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> จากค่าเริ่มต้นเป็นเครื่องหมาย #