Style quotesProperty
Style Object
Definition and Usage
The quotes property sets or returns the type of quotation marks for embedded quotations.
Syntax
Setting the quotes property:
Object.style.quotes="none|string string string string|inherit"
Returning the quotes property:
Object.style.quotes
| Value | Description |
|---|---|
| none | Default. Specifies that the "open-quote" and "close-quote" values of the "content" property will not produce any quotation marks. |
| string string string string | Specifies the quotation marks to use. The first two values specify the first level of quotation nesting, and the next two values specify the next level of quotation nesting. |
| inherit | The value of the quotes property is inherited from the parent element. |
Browser Support
All major browsers support the quotes property, except Internet Explorer and Safari.
Example
Example
Change quotation marks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("q1").style.quotes="'<' '>' '[start]' '[end]'";
}
</script>
</head>
<body>
<q id="q1">This is a <q>quotation element</q> inside another quotation element.</q>
<br>
<button type="button" onclick="displayResult()">Modify quotation marks</button>
<p><b>Note:</b> This example does not work in IE and Safari.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("q1").style.quotes="'<' '>' '[start]' '[end]'";
}
</script>
</head>
<body>
<q id="q1">This is a <q>quotation element</q> inside another quotation element.</q>
<br>
<button type="button" onclick="displayResult()">Modify quotation marks</button>
<p><b>Note:</b> This example does not work in IE and Safari.</p>
</body>
</html>
Try it Yourself »
Style Object Other Extensions