TransWikia.com

How to reduce dom manipulation while appending css using javaScript

Stack Overflow Asked by theFrontEndDev on December 28, 2020

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

4 Answers

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);
}

Answered by Nekiy2 on December 28, 2020

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>

Answered by Reyno on December 28, 2020

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.

Answered by K1ngjulien_ on December 28, 2020

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

Answered by Prinju Koshy Vaidyan on December 28, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP