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.

Syntax

Following is the syntax −

  • Returning quotes

object.style.quotes
  • Modifying quotes

object.style.quotes = “value”

Values

Here, value can be −

ValueExplanation
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.

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.

raja
Published on 23-Jul-2019 12:11:40
Advertisements