Question

如何访问具有特定CSS属性的特定div？

例如：

<div class="container">
  <div id=1 class="child"></div>
  <div id=2 class="child"></div>
  <div id=3 class="child"></div>
  . .
  <div id=50 class="child" style= "background:yellow;"></div>
  . . .
  <div id=100 class="child"></div>
</div>

那么，如何使用div访问background: yellow并检索其id？

具有黄色背景的div更改为不同的div，这样在jQuery中会正确吗？

Answer 1

首先您要输入错字：

<div id=50 class="child" styles: "background:yellow;"></div>
______________________________^^^ //Must be singulare 'style' plus an equal like `style=`

您可以按style之类的属性'div[style="background:yellow;"]'进行选择：

 console.log( $('div[style="background:yellow;"]').prop('id') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id=1 class="child"></div>
  <div id=2 class="child"></div>
  <div id=3 class="child"></div>
  . .
  <div id=50 class="child" style="background:yellow;"></div>
  . . .
  <div id=100 class="child"></div>
</div>

注意1：：如果style属性值中还有更多规则，我们可以使用包含选择器*=，例如：

$('div[style*="background:yellow;"]').prop('id');

Answer 2

您应该使用style="background:yellow"，而不要使用“样式：”。无论如何，这是您可以使用的方式：

const div = document.querySelector('div[style="background:yellow;"]').id;

如何访问具有特定CSS属性的特定div

2 个答案: