HTML | DOM Style quotes Property
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 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: 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
Please Login to comment...