HTML DOM Style quotes Property

The Style quotes Property in HTML DOM 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 returns the type of quotation of <q> tag.

Property Values:

none: This is the default value. 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 define the first level of quotation embedding, the second two values define 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 Marks	Entity 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: In this example, we will change the quotes property.

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style quotes Property</title>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <q id="myQ" style="font-size: 20px;">
        DOM Style quotes Property
    </q>
    <br><br>

    <button type="button" onclick="myFunc()">
        Change Quotation Style
    </button>

    <script>
        function myFunc() {

            // Change quotes
            document.getElementById("myQ")
                .style.quotes = "'‘' '’'";
        }
    </script>
</body>

</html>

Output:

quotes

Example 2: Change quotes property using entity number.

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style quotes Property</title>
</head>

<body style="text-align: center;">

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <q id="myQ" style="font-size: 20px;">
        DOM Style quotes Property
    </q>
    <br><br>

    <button type="button" onclick="myFunc()">
        Change Quotation Style
    </button>

    <script>
        function myFunc() {

            // Change quote
            document.getElementById("myQ")
                .style.quotes = "'\253' '\273'";
        }
    </script>
</body>

</html>

Output:

quotes2

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

HTML DOM Style quotes Property

Explore