CODEWITHSUNDEEP
javascriptcssappend
theFrontEndDev
theFrontEndDev

Reputation: 973

How to reduce dom manipulation while appending css using javaScript

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

Upvotes: 1

Views: 79

Answers (4)

Nekiy2
Nekiy2

Reputation: 101

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

Upvotes: 0

Reyno
Reyno

Reputation: 6525

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>

Upvotes: 1

k1ngjulien
k1ngjulien

Reputation: 421

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.

Upvotes: 1

Prinju Koshy Vaidyan
Prinju Koshy Vaidyan

Reputation: 485

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

Upvotes: 2

Related Questions