HTML DOM Style quotes Property

HTML Web Development Front End Technology

The HTML DOM style quotes property returns and modify the type of quotation marks for enclosing quotations in an HTML document.

Syntax

Following is the syntax −

Returning quotes

object.style.quotes

Modifying quotes

object.style.quotes = “value”

Values

Here, value can be −

Value	Explanation
inherit	It inherits this property value from its parent element.
initial	It set this property value to its default value.
none	It sets the default marks(“”) which are uses for quotation.
string string string string	It sets the quotation marks. Here the first two values specifies the first level of enclosing quotation and other two values specifies the next level of enclosing quotation.

Example

Let us see an example of HTML DOM style quotes property −

Live Demo

<!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 Property Example</h1>
<q>I'm a q element with some dummy text.</q>
<button onclick="add()" class="btn">Change quotes</button>
<script>
   function add() {
      document.querySelector('q').style.quotes = "'#' '#'";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Change quotes” button to change the quotation marks.

AmitDiwan

Updated on: 01-Jul-2020

25 Views

Kickstart Your Career

Get certified by completing the course

Get Started