HTML DOM Style quotes Property
Last Updated :
25 Aug, 2023
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:
object.style.quotes
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:
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:
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:
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...