Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style quotes Property

  • Last Updated : 22 Dec, 2020

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.




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




<!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
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :