The quotes property for CSS specifies quotation marks for any number of embedded quotations.
object.style.quotes = "value"; <'quotes'\> = auto | none | [ <string> <string> ]+ auto Automatically specified by the user agent.
none The open-quote and close-quote values of the content property produce no quotations marks, as if they were no-open-quote and no-close-quote respectively.
<string> Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<!doctype html>
<!doctype html>
<html>
<head>
<style>
q
{
quotes: none;
}
</style>
</head>
<body>
<p>John told us, <q>I met with Jane and she said, <q>Have a nice day!</q> </q></p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
q
{
quotes: '"' '"' "'" "'";
}
</style>
</head>
<body>
<p>John told us, <q>I met with Jane and she said, <q>Have a nice day!</q> </q></p>
</body>
</html>
<!doctype html>
<html>
<body>
<button>initial</button>
<button>auto</button>
<button>none</button>
<button value="'"' '"' '\'' '\''">string</button>
<p>John told us, <q>I met with Jane and she said, <q>Have a nice day!</q> </q></p>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
for(const myq of document.querySelectorAll("q"))
{
myq.style.quotes = myproperty;
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>