Style
We should always prefer CSS classes to style. Style is acceptable if we modify coordinates of an element dynamically.
// <div class='myclass'>My content</div>
let el = document.querySelector('div.myclass');
el.style.position = "absolute";
el.style.left = "200px";
Classes
If we assign a class to an element, it replaces the whole string of class. But sometimes we want to just add/remove a single class.
// <div id='mydiv'>My content</div>
let el = document.getElementById("mydiv");
el.className = "class1";
console.log(el.className); // class1
el.classList.remove("class1");
el.classList.add("class2");
el.classList.add("class3");
console.log(el.className); // class2 class3
Units
Don’t forget to add CSS units to values. For instance, we should not set elem.style.top to 10, but rather to 10px.Tasks
Task 1
Add btn-danger class to Bootstap buttton task
// <button type="button" class="btn" id='btnSave'>Save</button>
let el = document.getElementById('btnSave');
console.log(el.className); // btn
// your code here
// your code here END
console.log(el.className); // btn btn-danger
Last update: 175 days ago