The quotes CSS property 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 onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(value)" 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 myelements = document.querySelectorAll("q");
for(let myelement of myelements)
{
myelement.style.quotes = myparameter;
}
}
</script>
</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 myelements = document.querySelectorAll("q");
for(let myelement of myelements)
{
myelement.style.quotes = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>