The print-color-adjust CSS property provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a given device.
print-color-adjust: value; object.style.printColorAdjust = "value"; <'print-color-adjust'> = economy | exact economy The user agent should make adjustments to the page's styling as it deems necessary.
exact The user agent should not make adjustments to the page's styling except at the user's request.
<!doctype html>
<html>
<head>
<style>
p
{
background-color: black;
color: gray;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
</style>
</head>
<body>
<p>exact</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: black;
color: gray;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">economy</button>
<button onmouseover="myfunction(innerHTML)">exact</button>
<p>print-color-adjust</p>
<script>
function myfunction(myparameter)
{
const mystyle = document.querySelector("p").style;
mystyle.webkitPrintColorAdjust = myparameter;
mystyle.printColorAdjust = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: black;
color: gray;
}
</style>
</head>
<body>
<button>initial</button>
<button>economy</button>
<button>exact</button>
<p>print-color-adjust</p>
<script>
function myfunction(myparameter)
{
const mystyle = document.querySelector("p").style;
mystyle.webkitPrintColorAdjust = myparameter;
mystyle.printColorAdjust = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>