根據選定的顏色更改顏色

Question

如果我想進行一個有點陳列櫥窗設計演示，其中用戶會看到3個下拉框。我希望網站能夠響應用戶的選擇。

因此，在第一個下拉菜單中，您被要求選擇文本的顏色（包括所有h1-> h6，p元素，一個元素）。

第二個下拉列表是文字陰影（應用於h1-> h6，p和a）。

第三個下拉列表是字體。我正在加載字體，雖然fonts.google.com

當用戶更改其中任何樣式應立即更改。

我有一個jsfiddle我當前的代碼。該代碼sorta的作品，它改變顏色，筆畫和字體，但只在它自己的下拉菜單。

我怎樣才能讓它適用於整個頁面？

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> 

然後，您在選擇選項時調用該函數。我建議將字體，顏色和陰影放在一個函數中。

現在你有兩個選擇：

使用此功能，有三個參數。

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);" 

，或者，你可以調用函數不使用參數，以及從函數中獲取值。