如何在使用 javaScript 附加 css 时减少 dom 操作

Question

I have some dynamically created html whole css properties are in an object. So they need to be given using Javascript. So I have used the method below for appending to styles to the dynamically created dom element. I believe it's costly as each time a I'm doing a dom manipulation for appending styles. In the below code itself 10 lines are doing css dom manipulation.

function createNavbar() {
  let nav;
  nav = '<div class="navbar" id="nav"></div>';
  this.body.insertAdjacentHTML("beforeend", nav);
  let navBar = document.getElementById("nav");
  navBar.style.display = "block"; // style appending begins
  navBar.style.background = this.navColors.notice.bg;
  navBar.style.color = this.navColors.notice.textColor;
  navBar.style.borderWidth = "1px";
  navBar.style.borderStyle = "solid";
  navBar.style.borderColor = this.navColors.notice.borderColor;
  navBar.style.top = this.navPositionValue[this.position].top;
  navBar.style.right = this.navPositionValue[this.position].right;
  navBar.style.bottom = this.navPositionValue[this.position].bottom;
  navBar.style.left = this.navPositionValue[this.position].left; // style appending ends
}

Found a better way from this SO Question , so I used the below line to replace the 10 line code ( used the cssText property )

navBar.style.cssText = `display: block; color: ${this.navColors.notice.textColor}; background: ${this.navColors.notice.bg}; border: 1px solid ${this.navColors.notice.borderColor}; top: ${this.navPositionValue[this.position].top}; right: ${this.navPositionValue[this.position].right}; bottom: ${this.navPositionValue[this.position].bottom}; left: ${this.navPositionValue[this.position].left};`

By using this method I hope the Dom manipulation is reduced to 1 instead of 10, but the line is pretty long and hard to read. I would like to know if there is any better way than this to append long lines or many css in js

Answer 1

just add a class with common styles then add the class to the dom. isn't that the easiest way?

Answer 2

Your code above will only cause one update of the page because of how the Browser works. You do not have to worry about optimizing it.

Basically, all your changes will be applied at once after your function has ended, meaning that even if you change element.style multiple times inside one function, it is still just one operation.

For more information as to why and how this works I recommend this talk by Jake Archibald about how the Event Loop works.

Answer 3

You can add linebreaks inside template literals to increase readability.

Another option is to destructure some of the objects so we don't have really long variable names that we have to repeat.

 const navBar = document.querySelector(".navBar"); const navColors = { notice: { textColor: "red", bg: "green", borderColor: "blue", } }; const navPositionValue = { top: "5px", right: "10px", bottom: "15px", left: "20px", }; // destructering so we dont have to repeat "navColors.notice" or "navPositionValue" for each value const {textColor, bg, borderColor} = navColors.notice; const {ttop, right, bottom, left} = navPositionValue; navBar.style.cssText = ` display: block; color: ${textColor}; background: ${bg}; border: 1px solid ${borderColor}; top: ${ttop}; right: ${right}; bottom: ${bottom}; left: ${left}; `;

 .navBar { padding: 20px; }

 <div class="navBar"> I'm a navBar </div>

Answer 4

You can use template literals

And you can marge css border

function createNavbar() {
  let nav = `
        <div class="navbar" id="nav" style = "
          display: block;
          background: ${this.navColors.notice.bg};
          color: ${this.navColors.notice.textColor};
          border: 1px solid ${this.navColors.notice.borderColor};
          top: ${this.navPositionValue[this.position].top};
          right: ${this.navPositionValue[this.position].right};
          bottom: ${this.navPositionValue[this.position].bottom};
          left: ${this.navPositionValue[this.position].left};
        ">
        </div>
  `
  document.body.insertAdjacentHTML("beforeend", nav);
}