Question

我加载页面时设法确保我的可编辑DIV带有下划线红色。然后当我输入文字时，它变成白色。到现在为止还挺好。当我清除该字段时，无论是使用某个功能还是只是删除它（退格/删除），它都会保持白色。如何让它回到理解它是空的，并在文本被清除后再次更改课程？

CSS：

#Control1, #Control2, #Control3 {
background-image:url('img/underline_red.png');
}

#Control1:not([value=""]), #Control2:not([value=""]), #Control3:not([value=""])  {
background-image:url('img/underline.png');
}

HTML：

<div contentEditable=true id="Control1" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>

<br>

<div contentEditable=true id="Control2" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>


<br>

<div contentEditable=true id="Control3" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>


<br>

<div id="border">
<div contentEditable=true id="note" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
</div>


<br>


<button class="button"  onclick="clearControl1('Control1'), clearControl2('Control2'), clearControl3('Control3'), clearNote('note')"/>Clear</button>

使用Javascript：

<script type='text/javascript'>
function clearNote(note)
{
    document.getElementById(note).innerHTML = "";
}
function clearControl1(Control1)
{
    document.getElementById(Control1).innerHTML = "";
}
function clearControl2(Control2)
{
    document.getElementById(Control2).innerHTML = "";
}
function clearControl3(Control3)
{
    document.getElementById(Control3).innerHTML = "";
}
</script>

Answer 1

试试：

div:empty {
   some stuff like color
}

此处有关于浏览器支持的详细信息，此代码段来自

https://css-tricks.com/almanac/selectors/e/empty/

一般来说，有一些css选择器可以帮助您对“第一个”或“每秒”等高级内容做出反应。

div为空时CSS更改类

1 个答案: