2

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?

Ahmad Adibzad
  • 501
  • 2
  • 6
  • 14
Bartłomiej Flis
  • 287
  • 1
  • 11
  • 4
    Yes you should definitely be able to find this by just googling 'set css with vanilla javascript' – rjustin Sep 26 '17 at 20:02
  • 1
    Possible duplicate of [Setting DIV width and height in JavaScript](https://stackoverflow.com/questions/10118172/setting-div-width-and-height-in-javascript) and [Set element width or height in Standards Mode](https://stackoverflow.com/questions/4667651/set-element-width-or-height-in-standards-mode) – kyle Sep 26 '17 at 20:02
  • Why do you want to do this? That could impact which solution you go with (set inline style, add a different class, generate a class, set the size on the list it's self instead of each element, etc). – Blue Sep 26 '17 at 20:11

4 Answers4

1

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>
Ben
  • 5,079
  • 2
  • 20
  • 26
0
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.

Rafik Tighilt
  • 2,071
  • 1
  • 15
  • 27
0

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");
MUlferts
  • 1,310
  • 2
  • 16
  • 30
-1

Your best approach would probably to use the jQuery framework and use its .css() method.

http://api.jquery.com/css/

$('.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";
Maximilian Konrad
  • 64
  • 1
  • 8