Can we change the value of the attribute CSS class by javascript?
I mean, I had to create
<li class="Item">first</li>
Where CSS class I have attribute height: 200; width: 200;
And the question is anyhow can I change the value in class of height && width by using javascript?
Yes, you can directly access CSS properties in the stylesheet, and support for this is improving, and actually looks pretty good today (scroll down to browser compatibility section).
This will, however, not be a straight-forward process since, with a large stylesheet, you'll either have to traverse the cssRules array to find the appropriate class (best approach) or hard code the index of the class you want (probably don't do that. It works in the example because there is only one class).
Alternately, I suppose, as a compromise approach you could create a separate 'dynamic styles' stylesheet with only a few rules that might be changed dynamically later on.
Access the document stylesheet and modify the class you want like so:
setTimeout(function(){ // Timeout used only for before/after comparison
var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.width = '50px';
console.log(stylesheet.cssRules[0]);
}, 750);.item {
width: 100px;
height: 50px;
background-color: #000;
margin: 10px;
display: inline-block;
}<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
var els = document.querySelectorAll(className);
var index = 0, length = els.length;
for (var i = 0 ; index < length; index++) {
els[index].style.width= "500px";
els[index].style.height= "500px";
}
className just works like normal css selectors, so you can do like "li.Item" for example.
This will affect all the elements with the "Item" class.
Use element.style:
var element = document.getElementsByClassName('Item');
element.style.width = "100px";
just like in this answer
Or you can use jquery:
$(".Item").css("width", "100px");
Your best approach would probably to use the jQuery framework and use its .css() method.
$('.Item).css('width', '200px')
That should do it.
If you want to do it with vanilla javascript you could try the following:
document.getElementsByClassName("Item").style.width = "300px";