AnswerBun.com

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

Stack Overflow Asked by theFrontEndDev on December 28, 2020

4 Answers

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!

Related Questions

How to print a column using awk command line and add header

3  Asked on November 4, 2020 by maskiin

     

Create repeated declaration

5  Asked on November 3, 2020 by ferenc-deak

   

Why is synchronizing a method not advisable?

3  Asked on November 2, 2020 by linus-jame

     

How to filter array of objecs with an object

3  Asked on October 31, 2020 by zkk

     

Trying to have c++ program quit by inputting a letter

2  Asked on October 29, 2020 by elizabethcampbell441

 

reload page from express using setInterval

2  Asked on October 24, 2020 by dwayne-jackson

       

Jquery .last() equivalence to Javascript

1  Asked on October 23, 2020 by divja-afsa

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.