minte9

LearnRemember   JAVASCRIPT

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