英文:
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>
英文:
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>
<script>
function changeColor(background){
document.getElementById("showtext").style.color = document.querySelector(".dot").style.backgroundColor;
}
</script>
答案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("showtext").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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论