I am trying to use jQuery as little as possible and I would like to translate some jQuery code to pure JS.
I have this:
$(".myDiv").css({"width": 500});
What is the pure JS equivalent of the code above?
5 Answers
var els = document.querySelectorAll('.myDiv');
// If you want to get elements using its class name
// var els = document.getElementsByClassName('myDiv');
for(var i = 0, length = els.length; i < length; i++) {
els[i].style.width = '500px';
}
By using forEach:
var els = document.querySelectorAll('.myDiv');
els.forEach(function(el, ind) {
el.style.width = '500px';
});
4 Comments
Ismael Miguel
Your
for loop should be for(var i = 0, length = els.length; i < length; i++). It is faster than acessing the length property all the time.Harish Kommuri
@IsmaelMiguel may I know what is the difference?
James Thorpe
@IsmaelMiguel Such micro optimisations are rarely useful - in this case the body of the for loop is more than likely causing a reflow of the page, it'll dwarf the time spent in the for loop itself. It's usually best to stick with what's most readable until you have a measureable issue.
cнŝdk
Be aware of the use of .forEach() on array-like objects, it lacks of browsers compatibility, especially with IE.
There are a few ways to achieve the same affect, but you could go with something like this:
document.querySelectorAll('.myDiv').forEach(function(el) {
el.style.width = '500px';
});
querySelectorAll selects all of a particular CSS selector as a collection of DOM elements. forEach iterates through the collection, passing the currently selected element to the inner function, which is then styled with style.width.
Comments
document.querySelectorAll('.myDiv').forEach(function(elem) {
elem.style.width = "500px";
})
querySelectorAll gets the elements, then you iterate over the elements and set the style for each one.
9 Comments
cнŝdk
Be aware of the use of .forEach() on array-like objects, it lacks of browsers compatibility, especially with IE.
TKoL
If OP is worried about old browsers, he should probably not try to "use jQuery as little as possible" in the first place. Just go all out on jQuery to support older browsers. @pedromartinez
TKoL
Also, for anybody who wants to, there are polyfills for most (all) new array methods, like Some, forEach, Every, filter and so on.
cнŝdk
Well it's very important to mention it, he didn't want to use jQuery, so propably he is aiming an old browser here, so when we provide a pure JS solution, it needs to be compatible with all browsers. for future readers as well. If there are polyfills, they are worth of mention here.
TKoL
"he didn't want to use jQuery, so propably he is aiming an old browser here" -> the reverse should be true. The more you need to support older browsers, the more you should be resting upon jQuery.
|
You just need to use document.getElementsByClassName() to get all the elements with this class and then iterate over them and use style.width to change their width:
Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
div.style.width = "500px";
});
Demo:
Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
div.style.width = "100px";
});.myDiv{
background-color:yellow;
}<div class="myDiv">A</div>Note:
We use Array.from() to treat the result of document.getElementsByClassName as an Array as it's returned as a Nodelist or an array-like object and doesn't have the Array properties and the .forEach method in older browsers.
Comments
Use cssText
css(document.getElementById("red"),"color:red;font-size:24px")
function css(el,cssText){
el.style.cssText=cssText;
}<div id="red">something</div>