按类对呈现的html进行样式化

qkf9rpyu 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(210)

我使用react呈现了以下html：

<div class="m">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="a"></div>
  <div class="b e"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c e"></div>
  <div class="d"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d e"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

我被要求根据以下规则将div设置为四种特定颜色：
全部的 div.a 被涂成绿色（很容易）；
全部的 div.e 颜色为橙色（也很简单）；
如果一组3个div与类 .b , .c 及 .d 分别没有一个额外的 .e 附加类，将它们涂成蓝色；和
如果有，从一组3个div和类中选择 .b , .c 及 .d 分别有一个额外的 .e 附加类，为没有 .e 红色班级。
我知道我在这个系统上绝对没有访问jquery的权限，所以我想要一个纯css解决方案来实现这一点，或者在react的约束下用普通javascript实现这些规则。另一个警告是，在某些情况下，此输出可能因执行而异，但 .e 将始终与 .b , .c 或 .d 班级。我也没有办法在使用生成html后再更改它 replace() 例如，方法。
鉴于目前的限制，是否有办法实现规则设定的预期结果？

JavaScript Html reactjs css

来源：https://stackoverflow.com/questions/68303296/styling-react-rendered-html-by-classes

1条答案

按热度按时间

uttx8gqw1#

根据我对这个问题的理解，这可能就是你想要的

var x = document.getElementsByClassName('m')[0].querySelectorAll('div');

for (let i = 0; i < x.length; i++) {
  //Check if in order b, c, d
  if(x[i].classList.contains('b') && (i + 2) < x.length 
      && x[i+1].classList.contains('c') 
      && x[i+2].classList.contains('d')) {
    //Check if any of the divs in order have the class e
    if(x[i].classList.contains('e') || x[i+1].classList.contains('e')
        || x[i+2].classList.contains('e')) {
      x[i].style.backgroundColor = "red";
      x[i+1].style.backgroundColor = "red";
      x[i+2].style.backgroundColor = "red";
    }
    else {
      x[i].style.backgroundColor = "blue";
      x[i+1].style.backgroundColor = "blue";
      x[i+2].style.backgroundColor = "blue";
    }
  }
}

div.a { background-color: green;}
div.e { background-color: orange;}

<div class="m">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="a">5</div>
  <div class="b e">6</div>
  <div class="c">7</div>
  <div class="d">8</div>
  <div class="a">9</div>
  <div class="b">10</div>
  <div class="c e">11</div>
  <div class="d">12</div>
  <div class="a">13</div>
  <div class="b">14</div>
  <div class="c">15</div>
  <div class="d e">16</div>
  <div class="a">17</div>
  <div class="a">18</div>
  <div class="a">19</div>
  <div class="b">20</div>
  <div class="c">21</div>
</div>

赞(0）回复(0）举报 2021-09-13

我来回答

按类对呈现的html进行样式化

1条答案

相关问题

热门标签

最新问答