HTML DOM Style quotes Property

HTMLWeb DevelopmentFront End Technology

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


Following is the syntax −

  • Returning quotes
  • Modifying quotes = “value”


Here, value can be −

inheritIt inherits this property value from its parent element.
initialIt set this property value to its default value.
noneIt 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.


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

 Live Demo

<!DOCTYPE html>
   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;
<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>
   function add() {
      document.querySelector('q').style.quotes = "'#' '#'";


This will produce the following output −

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

Updated on 01-Jul-2020 13:03:12