Skip to content
Related Articles

Related Articles

HTML | DOM Style quotes Property

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Jul, 2022

The Style quotes Property in HTML DOM is used to represent the HTML < q > element. This tag is used to set/return the type of quotation marks for embedded quotations. This element can be accessed by using getElementById() method. 

Syntax:

  • To get the property:
object.style.quotes
  • To set the property:
object.style.quotes = "none|string string string string|
initial|inherit"

Return Value: It return the type of quotation of < q > tag. 

Property Values:

  • none: This is default. It specifies that the open-quote and close-quote values will not produce any quotation marks.
  • string string string string: It specifies the quotation marks to use. The first two values defines the first level of quotation embedding, the second two values defines the second level of quote embedding, etc
  • initial: Sets this property to its default value.
  • inherit: Inherits this property from its parent element.

Quotation Marks characters and Entity Numbers:

Quotation MarksEntity Numbers
double Quote\0022
single quote\0027
single, left angle quote\2039
single, right angle quote\203A
double, left angle quote\00AB
double, right angle quote\00BB
left quote (single high-6)\2018
right quote (single high-9)\2019
left quote (double high-6)\201C
right quote (double high-9)\201D
double quote (double low-9)\201E

Example 1: Change quotes property. 

html




<!DOCTYPE html>
<html>
    <head>
        <title>DOM Style quotes Property </title>
    </head>
       
    <body>
        <center>
            <h1 style = "color:green;width:50%;" id = "sudo">
                GeeksForGeeks
            </h1>
               
            <q id="myQ" style = "color:black;
                                 width:50%;
                                 font-size: 30px;">
            DOM Style quotes Property
            </q>
            <br>
            <button type = "button" onclick = "geeks()">
                Change
            </button>
               
            <script>
            function geeks() {
 
            // Change quotes
            document.getElementById(
            "myQ").style.quotes = "'‘' '’'";
            }
            </script>
        </center>
    </body>
</html>

Output

  • Before click on the button:

 

  • After click on the button:

 

Example 2: Change quotes property using entity number. 

html




<!DOCTYPE html>
<html>
    <head>
        <title>DOM Style quotes Property </title>
    </head>
       
    <body>
        <center>
            <h1 style = "color:green;width:50%;" id = "sudo">
                GeeksForGeeks
            </h1>
               
            <q id="myQ" style = "color:black;
                                 width:50%;
                                 font-size: 30px;">
            DOM Style quotes Property
            </q>
            <br>
            <button type = "button" onclick = "geeks()">
                Change
            </button>
               
            <script>
            function geeks() {
 
            // Change quote.
            document.getElementById(
            "myQ").style.quotes = "'\253' '\273'";
            }
            </script>
        </center>
    </body>
</html>                 

Output

  • Before click on the button:

 

  • After click on the button: 

Supported Browsers: The browser supported by HTML | DOM Style quotes Property are listed below:

  • Google Chrome 11 and above
  • Edge 12 and above
  • Mozilla Firefox 1.5 and above
  • Opera 4 and above
  • Safari 9 and above
  • Internet Explorer 8 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!