如何在使用javaScript添加css时减少dom操作
我有一些动态创建的html，整个css属性都在一个对象中。因此，需要使用Javascript提供它们。因此，我使用下面的方法将样式附加到动态创建的dom元素中。我相信这是代价高昂的，因为每次我都在为附加样式而进行dom操作。在下面的代码中，有10行正在执行css dom操作如何在使用javaScript添加css时减少dom操作,javascript,css,append,Javascript,Css,Append,我有一些动态创建的html，整个css属性都在一个对象中。因此，需要使用Javascript提供它们。因此，我使用下面的方法将样式附加到动态创建的dom元素中。我相信这是代价高昂的，因为每次我都在为附加样式而进行dom操作。在下面的代码中，有10行正在执行css dom操作 function createNavbar() { let nav; nav = '<div class="navbar" id="nav"></div>
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
}
通过使用这种方法，我希望Dom操作减少到1而不是10，但是这行代码很长，很难阅读。我想知道是否有比这更好的方法在js中添加长行或许多css只需添加一个具有常见样式的类，然后将该类添加到dom中。
这不是最简单的方法吗？只需添加一个具有常见样式的类，然后将该类添加到dom中。
这不是最简单的方法吗？由于浏览器的工作方式，上面的代码只会导致一次页面更新。您不必担心优化它 基本上，所有更改都将在函数结束后立即应用，这意味着即使在一个函数中多次更改element.style，它仍然只是一个操作
有关此操作的原因和方式的详细信息，我建议您了解事件循环的工作方式。由于浏览器的工作方式，您上面的代码只会导致一次页面更新。您不必担心优化它 基本上，所有更改都将在函数结束后立即应用，这意味着即使在一个函数中多次更改element.style，它仍然只是一个操作
有关此操作的原因和方式的详细信息，我建议您了解事件循环的工作方式。您可以在内部添加换行符以提高可读性 另一个选择是对一些对象进行修改，这样我们就不需要重复很长的变量名 const navBar=document.querySelector.navBar； 常量导航颜色={ 注意:{ 文本颜色：红色， 背景：绿色， 边框颜色：蓝色， } }; 常量navPositionValue={ 顶部：5px， 右：10px， 底部：15px， 左：20px， }; //析构函数，因此我们不必为每个值重复NavColor.notice或navPositionValue const{textColor，bg，borderColor}=navColors.notice； const{ttop，right，bottom，left}=navPositionValue； navBar.style.cssText=` 显示：块； 颜色：${textColor}； 背景：${bg}； 边框：1px实心${borderColor}； 顶部：${ttop}； 右：${right}； 底部：${bottom}； 左：${left}； `; navBar先生{ 填充：20px； } 我是导航员
可以在内部添加换行符以增加可读性 另一个选择是对一些对象进行修改，这样我们就不需要重复很长的变量名 const navBar=document.querySelector.navBar； 常量导航颜色={ 注意:{ 文本颜色：红色， 背景：绿色， 边框颜色：蓝色， } }; 常量navPositionValue={ 顶部：5px， 右：10px， 底部：15px， 左：20px， }; //析构函数，因此我们不必为每个值重复NavColor.notice或navPositionValue const{textColor，bg，borderColor}=navColors.notice； const{ttop，right，bottom，left}=navPositionValue； navBar.style.cssText=` 显示：块； 颜色：${textColor}； 背景：${bg}； 边框：1px实心${borderColor}； 顶部：${ttop}； 右：${right}； 底部：${bottom}； 左：${left}； `; navBar先生{ 填充：20px； } 我是导航员
您可以使用模板文本 你可以在css边框上加上边框
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);
}
您可以使用模板文本 你可以在css边框上加上边框
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);
}
因为您使用的是换行符，所以可以添加换行符以获得更可读的代码。或者只是创建一个类并将该类添加到element@Reyno哦太好了！我会的。我使用的方法是优化的吗？使用10条指令来更改尽可能多的样式属性不会导致10个单独的CSS重新绘制，因为您在执行所有更改时，不会让JavaScript事件循环介于两者之间。@theFrontEndDev是的，这很好，但它们与第一个选项没有太大区别。我还创建了一个答案，向您展示如何删除颜色和位置的大变量。它有助于提高可读性。无需优化。浏览器将只更新您的css一次。下面是我的答案，因为您使用的是换行符，所以可以添加换行符以获得更可读的代码。或者只是创建一个类并将该类添加到element@Reyno哦太好了！我会的。我使用的方法是优化的吗？使用10条指令来更改尽可能多的样式属性不会导致10个单独的CSS重新绘制，因为您在执行所有更改时，不会让JavaScript事件循环介于两者之间。@theFrontEndDev是的，这很好，但它们与第一个选项没有太大区别。我还创建了一个答案，向您展示如何删除您拥有的大变量
颜色和位置。它有助于提高可读性。无需优化。浏览器将只更新您的css一次。下面是我的答案css是动态的，对吗？我们如何才能将它们添加到类中。同意您的意见，但前提是所有这些动态样式都无条件同时应用。如果某些样式的添加是有条件的，则您的方法不适用。@theFrontEndDev，navBar.classList.addyour_class；实际上，您可以使用CSS对象模型操作向现有样式表中的类添加样式CSS是动态的，对吗？我们如何才能将它们添加到类中。同意您的意见，但前提是所有这些动态样式都无条件同时应用。如果某些样式的添加是有条件的，则您的方法不适用。@theFrontEndDev，navBar.classList.addyour_class；事实上，您可以使用CSS对象模型操作将样式添加到现有样式表中的类中。在这种情况下，浏览器是否智能可能有点言过其实，也是不必要的复杂原因，但结论是正确的。@K1ngjulien_uu感谢您的更新。我认为它类似于append方法。我相信我在某个地方读到过，不断地向DOM追加是代价高昂的，他们解释了称为文档片段的概念，以减少这种代价。我也认为这是一个类似的案例。无论如何，第二个看起来比10行代码更干净。我想如果没有换行的话fine@theFrontEndDev看起来您只是在dom中添加了一个元素，这样我就不会担心任何性能问题。@TheFrontDev还可以使用document.createElement创建新的dom节点，并将它们添加到需要的地方，因此，您不必查询刚才使用insertAdjacentHTMLbrowsers is smart插入的节点，在本例中，这可能是一个稍微夸张的说法，也是一个不必要的复杂原因，但结论是正确的。@K1ngjulien_uu感谢您的更新。我认为它类似于append方法。我相信我在某个地方读到过，不断地向DOM追加是代价高昂的，他们解释了称为文档片段的概念，以减少这种代价。我也认为这是一个类似的案例。无论如何，第二个看起来比10行代码更干净。我想如果没有换行的话fine@theFrontEndDev看起来您只是在dom中添加了一个元素，这样我就不会担心任何性能问题。@TheFrontDev还可以使用document.createElement创建新的dom节点，并将它们添加到需要的地方，因此，您不必查询刚才使用InsertAdjacentHTML插入的节点。这太棒了！谢谢你：这太棒了！谢谢你：