Question

我对此代码有疑问。我希望文本颜色与div的背景颜色相同，以便可以使用CSS的反转功能。我希望它可以动态更改。我尝试将触发器从onload更改为onmouseover，虽然可以，但是没有任何意义。

是否有一种方法可以使它作为onload起作用，以及当我使用Chrome Inspection等更改div的背景色时？

function getColor() {
  document.getElementById('text1').style.color = document.getElementById('div1').style.backgroundColor;
}

 <div id="div1" onload="getColor();" style="background-color: #fff">
    <h1 id="text1" style="filter: invert(100%)">Sample Text</h1>

Answer 1

function getColor() {
	document.getElementById('text1').style.color = document.getElementById('div1').style.backgroundColor;
			 }

<body onload="getColor();">
<div id="div1" onload="getColor();" style="background-color: #fff">
	 <h1 id="text1" style="filter: invert(100%)">Sample Text</h1>
   </div>
   </body>

使用<body onload="getColor();">代替div onload

Answer 2

即时使用功能在JS中将其设置为无功能，然后删除onload="getColor();"，这将在JS加载时完成

var color= document.getElementById('div1').style.backgroundColor;
document.getElementById('text1').style.color =color;

<div id="div1" style="background-color: #fff">
	 <h1 id="text1" style="filter: invert(100%)">Sample Text</h1>
   </div>

编辑！您可以在CSS中进行操作：https://css-tricks.com/almanac/properties/m/mix-blend-mode/

#text1,#text2,#text3{
  mix-blend-mode: exclusion;
}

<div id="div1" style="background-color: #fff">
	 <h1 id="text1" style="filter: invert(100%)">Sample Text</h1>
</div>
<div id="div1" style="background-color: red">
	 <h1 id="text2" style="filter: invert(100%)">Sample Text</h1>
</div>
<div id="div1" style="background-color: blue">
	 <h1 id="text3" style="filter: invert(100%)">Sample Text</h1>
</div>

加载并更改样式后，更改样式以匹配另一个元素的样式

2 个答案: