I am getting an error when using setProperty method in javascript trying to modify a css element value using Setproperty method.
As seen setproperty method is a CSSStyleDeclaration Object Methods and should work with below code.
but is giving me error as below
css.html:20 Uncaught DOMException: Failed to execute ‘setProperty’ on ‘CSSStyleDeclaration’: These styles are computed, and therefore the ‘color’ property is read-only.
<html>
<head>
<style>
h1
{
color:rgb(77, 50, 130) ;
}
</style>
</head>
<body>
<h1 id="a">My First CSS Example</h1>
<button onclick="click1()">HTML</button>
<script>
function click1()
{
var para = document.querySelector('h1');
var parameter = window.getComputedStyle(para);
var d=parameter.getPropertyValue('color');
document.getElementById('a').innerHTML = d;
parameter.setProperty('color','red');
}
</script>
</body>
</html>
New contributor
Habibuddin Syed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.