Javascript機能NCSの色を変更

私は周りを見ていて、私のケースを解決するために管理していない。Javascript機能NCSの色を変更

私が欲しいのは、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() { 
 
\t document.getElementById("myText").value; 
 
\t // 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>

出典

2017-11-26 Chris011001

私はそれが完全に働いた、 – Chris011001

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

出典

2017-11-26 10:08:11 bhansa

ありがとう...それはユーザーの入力に基づいて、私が欲しい新しい色に色を変更しますカント！ – Chris011001

うれしかったよ！ – bhansa

Javascript機能NCSの色を変更

答えて

関連する問題