获取一个 div 元素的背景颜色以修改文本颜色。

huangapple go评论72阅读模式
英文:

Get a div element background color to modify a text color

问题

以下是您要翻译的内容:

[![example](https://i.stack.imgur.com/VDex9.png)](https://i.stack.imgur.com/VDex9.png)

Hi Everyone :)

As on my example in image I have several div elements representing the colors and I wish that by clicking on them the text entered by the user changes color

<label id="color" for="coloris">Coloris :<span class="haut">V</span><span>V</span></label>
<div id="coloris">
  <div class="dot" title="RAL 9018 - Blanc Papyrus" style="background-color:#d4dbd9" onclick="changeColor('#showtext')">
    <input type="radio" value="RAL 9018 - Blanc Papyrus" name="RAL">
  </div>
  <div class="dot" title="RAL 9016 - Blanc Signalisation" style="background-color:#f6f8fa" onclick="changeColor('#showtext')">
    <input type="radio" value="RAL 9016 - Blanc Signalisation" name="RAL">
  </div>
  <div class="dot" title="RAL 9011 - Noir Graphite" style="background-color:#212123" onclick="changeColor('#showtext')">
    <input type="radio" value="RAL 9011 - Noir Graphite" name="RAL">
  </div>
  <div class="dot" title="RAL 9010 - Blanc Pur" style="background-color:#f4f5ef" onclick="changeColor('#showtext')">
    <input type="radio" value="RAL 9010 - Blanc Pur" name="RAL">
  </div>
</div>

<script>
function changeColor(background){
  document.getElementById("showtext").style.color = document.querySelector(".dot").style.backgroundColor;
}
</script>
英文:

获取一个 div 元素的背景颜色以修改文本颜色。

Hi Everyone 获取一个 div 元素的背景颜色以修改文本颜色。

As on my example in image I have several div elements representing the colors and I wish that by clicking on them the text entered by the user changes color

 &lt;label id=&quot;color&quot; for=&quot;coloris&quot;&gt;Coloris :&lt;span class=&quot;haut&quot;&gt;V&lt;/span&gt;&lt;span&gt;V&lt;/span&gt;&lt;/label&gt;
  &lt;div id=&quot;coloris&quot;&gt;
&lt;div class=&quot;dot&quot; title=&quot;RAL 9018 - Blanc Papyrus&quot; style=&quot;background-color:#d4dbd9&quot; onclick=&quot;changeColor(&#39;#showtext&#39;)&quot;&gt;
    &lt;input type=&quot;radio&quot; value=&quot;RAL 9018 - Blanc Papyrus&quot; name=&quot;RAL&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;dot&quot; title=&quot;RAL 9016 - Blanc Signalisation&quot; style=&quot;background-color:#f6f8fa&quot; onclick=&quot;changeColor(&#39;#showtext&#39;)&quot;&gt;
    &lt;input type=&quot;radio&quot; value=&quot;RAL 9016 - Blanc Signalisation&quot; name=&quot;RAL&quot;&gt;
    &lt;/div&gt;
       &lt;div class=&quot;dot&quot; title=&quot;RAL 9011 - Noir Graphite&quot; style=&quot;background-color:#212123&quot; onclick=&quot;changeColor(&#39;#showtext&#39;)&quot;&gt;
    &lt;input type=&quot;radio&quot; value=&quot;RAL 9011 - Noir Graphite&quot; name=&quot;RAL&quot;&gt;
    &lt;/div&gt;
       &lt;div class=&quot;dot&quot; title=&quot;RAL 9010 - Blanc Pur&quot; style=&quot;background-color:#f4f5ef&quot; onclick=&quot;changeColor(&#39;#showtext&#39;)&quot;&gt;
    &lt;input type=&quot;radio&quot; value=&quot;RAL 9010 - Blanc Pur&quot; name=&quot;RAL&quot;&gt;
    &lt;/div&gt;
&lt;script&gt;
function changeColor(background){
  document.getElementById(&quot;showtext&quot;).style.color = document.querySelector(&quot;.dot&quot;).style.backgroundColor;
}
&lt;/script&gt;

答案1

得分: 0

你可以修改你的changecolor函数,使其接受一个元素作为参数,并像这样改变文本的颜色,与被点击元素的背景颜色相同:

<pre><code>
function changeColor(e){
    document.getElementById("showtext").style.color = e.style.backgroundColor;
}
</code></pre>

然后,使用this关键字将被点击的元素传递给你的changecolor函数,就像这样:

<pre><code>onclick="changeColor(this)"</code></pre>
英文:

You can modify your changecolor function to take an element as parameter and change the text's color with the clicked element's background color like so:

<pre><code>

function changeColor(e){
    document.getElementById(&quot;showtext&quot;).style.color = e.style.backgroundColor;
}

</code></pre>

Then pass the clicked element to your changecolor function with the this keyword like so:

<pre><code>onclick="changeColor(this)"</code></pre>

huangapple
  • 本文由 发表于 2023年3月10日 00:18:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75687313.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定