Question

我一直在四处寻找，并没有设法解决我的案子。

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

＆＃13;

<!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>

＆＃13;

Answer 1

我已经给了div id并更改了data-w3-color属性并且每次调用w3SetColorsByAttribute()函数。

＆＃13;

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();
  
}

＆＃13;

div {
  border: 3px solid #FFF;
  padding-top: 30%;
  padding-right: 30%;
  padding-bottom: 30%;
  padding-left: 30%;
}

＆＃13;

<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>

＆＃13;

Javascript函数更改NCS颜色

1 个答案: