選択した色に基づいて色を変更します

Question

私はちょっとしたショーケースデザインのデモをしたいと思っています。ここには3つのドロップダウンがあります。私は、ウェブサイトがユーザーの選択に応じるようにしたい。

最初のドロップダウンでは、テキストの色（すべてのh1-> h6、p要素、a要素を含む）を選択するよう求められます。

2番目のドロップダウンは、テキストシャドウです（h1-> h6、pおよびaに適用されます）。

3番目のドロップダウンはフォント用です。フォントを読み込んでいますが、fonts.google.com

ユーザーがいずれかを変更すると、スタイルがすぐに変更されるはずです。

私の現在のコードはjsfiddleです。そのコードのソートが動作し、色、ストローク、フォントが変更されますが、それ自身のドロップダウンメニューでのみ変更されます。

ページ全体に適用するにはどうすればよいですか？

https://jsfiddle.net/cajsw1eq/3/

<script> 
function colorFunction(pos) { 
    pos.className = pos[pos.selectedIndex].className; 
    pos.blur(); 
} 
</script> 

Answer 1

私はこのように、オプションのIDタグでカラーコードを設定しますので、あなたは、変更機能のオプションのすべての異なる値をループする必要はありません。

<option id="#FC6B0A" class="orange" value="1">Orange</option> 

次に、オプションが選択されているときに関数を呼び出します。 1つの機能にフォント、カラー、シャドウを入れることをお勧めします。

3つのパラメータを使用して、この機能を使用します。

function change(colorId, shadow, font) { 
    if (colorId != null) { 
     //example of working code: 
     document.getElementsByTagName("BODY")[0].style.color = colorId; 
    } 
    if (shadow != null { 
     //code... 
    } 
    if (font != null) { 
     //more code.. 
    } 
} 

と、次のように関数を呼び出す：

onchange="change(this.options[this.selectedIndex].id, null, null);" 

あるいは、あなたはパラメータを使用せずに関数を呼び出すと、関数内から値を取得することができます。