将css应用于javascript中的一系列元素

我在两个div之间有一些html元素。我想要的是将css类应用于该范围。 e、 g

---

然而，我不知道如何将css应用到这个范围。如何做到这一点，或者是否有其他方法来实现我想要做的事情？

向div添加一个类，然后使用for循环来循环并设置它们的样式

<div id="start_marker" style="display:none"></div>
<h1>some content</h1>
<div class="styler">child1</div>
<div class="styler">child2</div>
<div id="end_marker" "display:none"></div>

一些内容
孩子1
孩子2

let divs=document.getElementsByClassName（'styler'））
for（设i=0；i

我想你可以用CSS来实现这一点。比如：

#开始标记~*：非（#结束标记~*）{
/*…突出显示规则*/
}

我目前可以想到的一个实现是使用

nextElementSibling

属性在范围内的元素上循环。也许CSS本身也可以解决您的问题，但出于好奇，以下内容应该适合您：-

const startingDiv=document.getElementById（“开始标记”）；
const endingDiv=document.getElementById（“结束标记”）；
函数setClassForRange（起始元素、结束元素、类名）{
设温度=起动电位；
while（temp.nextElementSibling！==endingEle）{
让currentElement=temp.nextElementSibling；
currentElement.classList.add（className）；
temp=temp.nextElementSibling；
}
}
setClassForRange（起始div、结束div、'rangeCSS'）
.rangeCSS{
颜色：蓝色；
}
在范围之前
一些内容
孩子1
孩子2
在range之后
您也可以使用css来定位这些元素。
如果这适用于你的问题


CSS通用同级选择器
~
（）
和否定
：not（）
（）

我们应该做到这一点



以前不受影响
一些内容
孩子1
孩子2
之后不受影响
：is（#开始标记~*）：not（#结束标记~*））{
颜色：深绿色；
}
我无法将css添加到两个标记中的子元素。不是我能控制的。
const startingDiv = dom.getElement("start_marker");
const endingDiv = dom.getElement("end_marker");
if (startingDiv && endingDiv) {
  let range = new Range();
  range.setStartAfter(startingDiv);
  range.setEndBefore(endingDiv);
  //todo: how to apply css to the range.
}

<div id="start_marker" style="display:none"></div>
<h1>some content</h1>
<div class="styler">child1</div>
<div class="styler">child2</div>
<div id="end_marker" "display:none"></div>

let divs = document.getElementsByClassName('styler')
for (let i = 0; i < divs.length; i++) {
  divs[i].style.display = 'none' // replace with css you want to add
}