使用纯javascript根据数据属性更改列表项高度

Question

所以我需要使用普通的 javascript 并且没有表格，使 lis 具有相同的数据属性相同的高度，但是我正在努力完成这项任务，主要是让 lis 具有相同的数据属性。这是代码：https://codepen.io/benasl/pen/ooLrON?editors=1010

ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

li {
  padding: 5px 10px;
  display:block;
  position:relative;
  height: 100%;
}

p {
  width: 100%;
}

<div class="row">
  <div class="col-sm-4">
    <ul>
      <li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
      <li class="item" data-item="2"><p>test</p></li>
      <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li class="item" data-item="4"><p>test</p></li>
    </ul> 
  </div>

  <div class="col-sm-4">
    <ul>
      <li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttasdsadasd es ttesttesttestas asdasdasdsad asdasdasd</p></li>
      <li class="item" data-item="2"><p>test</p></li>
      <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li class="item" data-item="4"><p>test</p></li>
    </ul> 
  </div>
  
  <div class="col-sm-4">
    <ul>
      <li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
      <li class="item" data-item="2"><p>test</p></li>
      <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li class="item" data-item="4"><p>test</p></li>
    </ul> 
  </div>
  
</div>

Answer 1

查看 CSS 中的属性选择器。 Here 是一个简单的指南。

你可能想要这样的东西：

li[data-item="1"] {
  height: 5px;
}