style property overwrites class

Backlinks
- use class over style property for consistency
- clicking button to enlarge its parent in js

in HTML, element’s style property is the highest priority

<div class="red" style="background-color: blue"></div>

with

.red{
    background-color:red;
        }

will give blue.

Backlinks

as css class overwrites from left to right and style property overwrites class, it is better to avoid the style property unless dynamic positioning with style.left is necessary, as style property would always overwrite class, it make element.classList.add("class") behaviour not as expected.

clicking button to enlarge its parent in js

in react.js or next.js, this could be done by:

onClick function gets object e
parent = e.currentTarget.parentNode gets you the parent
parent.style.position = absolute and parent.style.left/right/top/bottom change size with respect to their distance to closest relative context; parent.style.width/height change absolute size
with parent.classList.add/remove("class") and a class with larger size with the above css properties, the parent would be enlarged

note:

style property overwrites class and

style property overwrites class

Table of Contents

Backlinks

clicking button to enlarge its parent in js