如何根据类名和可编辑的值切换div背景颜色

Question

我想根据类名'cls-editable'更改div背景颜色，javascript使用它来查找元素，然后将editable属性设置为'true'或'false。

可编辑时，背景为黄色。否则为白色。

HTML

<div class='cls-editable'>
  Hello
</div>


CSS:

.cls-editable, [contenteditable="true"] {
   background-color: yellow;
}

.cls-editable, [contenteditable="false"] {
   background-color: white;
}


Javascript:

if (this.checkStatus) {
  $('.dirs_row').children('.cls-editable').each(function () {
    $(this).attr('contenteditable', 'true');
  });
} else {
  $('.dirs_row').children('.cls-editable').each(function () {
    $(this).attr('contenteditable', 'false');
  });
}

但是，它不起作用。 CSS怎么了？

Answer 1

您几乎完全正确！这是正确的解决方案：

.cls-editable[contenteditable="true"] {
   background-color: yellow;
}

.cls-editable[contenteditable="false"] {
   background-color: white;
}

<div class='cls-editable' contentEditable="true">
  Hello
</div>
<div class='cls-editable' contentEditable="false">
  Hello
</div>

Answer 2

尝试一下

CSS

.cls-editable[contenteditable="true"] {
   background-color: yellow;
}

.cls-editable[contenteditable="false"] {
   background-color: white;
}

输出

Answer 3

您需要在属性css前面添加div

.cls-editable, div[contenteditable="true"] {
   background-color: yellow;
}

.cls-editable, div[contenteditable="false"] {
   background-color: green;
}

<div class='cls-editable' >
  Hello
</div>