Exploring the world of custom CSS properties, I have crafted the code below.
If I embed the CSS directly within the canvas tag using a STYLE attribute (like this: style="--rgLinewidth: 3" ), then I am able to access these custom CSS values with the script provided below.
However, when using a <style> tag as shown below, the custom CSS properties do not display.
Is there a way to accomplish this? If so, how?
<html>
<head>
<style>
canvas#cvs {
--rgLinewidth: 3;
background-color: red;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
styles = window.getComputedStyle(canvas);
alert(styles.getPropertyValue('background-color'));
alert(styles.getPropertyValue('--rgLinewidth'));
for (var i=0; i<styles.length; i++) {
if (canvas.style[i].indexOf('--rg') === 0) {
var value = styles.getPropertyValue(canvas.style[i]);
alert([canvas.style[i], value]);
}
}
</script>
</body>
</html>