gpt4 book ai didi

Javascript 函数改变 NCS 颜色

转载 作者:行者123 更新时间:2023-11-30 20:57:33 25 4
gpt4 key购买 nike

我一直在四处寻找,但未能解决我的案子。

我想要的是 JS 根据用户输入的值改变颜色。 w3schools 有一个库 w3color.js,您只需使用 div data-w3-color="ncs(3010-B10R)"调用它

这是我得到的:

<!DOCTYPE html>
<style>
div {
border: 3px solid #FFF;
padding-top: 30%;
padding-right: 30%;
padding-bottom: 30%;
padding-left: 30%;
}
</style>
<body>

<input type="text" id="myText" value="ncs code here..">
<button type="button" onclick="myFunction()">Try it</button>

<div data-w3-color="ncs(3010-B10R)">
</div>

<script>
function myFunction() {
document.getElementById("myText").value;
// change div data-w3-color to ncs code input
}
</script>
<!--
https://www.w3schools.com/colors/colors_ncs.asp
-->
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<script>w3SetColorsByAttribute();</script>
</body>
</html>

最佳答案

我已经为 div 提供了一个 id 并更改了 data-w3-color 属性并每次都调用了 w3SetColorsByAttribute() 函数.

function myFunction() {
var color = document.getElementById("myText").value;
// change div data-w3-color to ncs code input
document.getElementById("ncsColor").setAttribute("data-w3-color", 'ncs('+ color +')')
w3SetColorsByAttribute();

}
div {
border: 3px solid #FFF;
padding-top: 30%;
padding-right: 30%;
padding-bottom: 30%;
padding-left: 30%;
}
<input type="text" id="myText" placeholder="ncs code here..3010-B10R">
<button type="button" onclick="myFunction()">Try it</button>

<div id="ncsColor" data-w3-color="ncs(3010-B10R)">
</div>

<script src="https://www.w3schools.com/lib/w3color.js"></script>

关于Javascript 函数改变 NCS 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47494916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com