如何使用選擇選項更改div的樣式

Question

我正在嘗試使用selecth選項下拉列表來更改div的樣式，但我不知道如何去做。以下是我正在處理的簡化版本。可以添加哪些代碼來完成這項工作？

我正在尋找一個優雅的解決方案，儘可能少的代碼。在這個例子中，除了默認值之外，應該有9種可能的組合。

<div id="change">Some Text</div> 

<select name="font" id="font"> 
<option value="Arial">Arial</option> 
<option value="Tahoma">Tahoma</option> 
<option value="Georgia">Georgia</option> 
</select> 

<select name="foreground" id="foreground"> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Blue">Blue</option> 
</select> 

<select name="background" id="background"> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Blue">Blue</option> 
</select> 

Answer 1

在這裏，代碼是使用純的JavaScript替代（無jQuery的）：

var change = document.getElementById('change'); 

document.getElementById('foreground').addEventListener('change', function(){ 
    change.style.color = this.value; 
}); 

document.getElementById('font').addEventListener('change', function(){ 
    change.style.fontFamily = this.value; 
}); 

document.getElementById('background').addEventListener('change', function(){ 
    change.style.backgroundColor = this.value; 
}); 

退房此codepen。

Answer 2

首先，我會調整一些東西以後編碼，以簡化...

<select name="font" id="font" class="changeDiv" data-change="font-family"> 
<option value="Arial">Arial</option> 
<option value="Tahoma">Tahoma</option> 
<option value="Georgia">Georgia</option> 
</select> 

<select name="foreground" id="foreground" class="changeDiv" data-change="color"> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Blue">Blue</option> 
</select> 

<select name="background" id="background" class="changeDiv" data-change="background-color"> 
<option value="Red">Red</option> 
<option value="Green">Green</option> 
<option value="Blue">Blue</option> 
</select> 

......現在，你可以連接到班級和處理「變」 ...

$(".changeDiv").on('change', function() { 
    var change = $(this).data("change"); 
    var value = $(this).val(); 
    $("#divToChange").css(change, value); 
}); 

#divToChange應，有些顯然是你想操縱股利。

Answer 3

因爲您沒有將jQuery指定爲標記。這裏是用純JS

<div id="change">Some Text</div> 
<select name="font" id="font" onchange="changeFont(this.value);"> 
    <option value="Arial">Arial</option> 
    <option value="Tahoma">Tahoma</option> 
    <option value="Georgia">Georgia</option> 
</select> 
<select name="foreground" id="foreground" onchange="changeForeground(this.value);"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    <option value="Blue">Blue</option> 
</select> 
<select name="background" id="background" onchange="changeBackground(this.value);"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    <option value="Blue">Blue</option> 
</select> 
<script> 
    var obj = document.getElementById('change'); 

    function changeFont(val) { 
     obj.style.fontFamily = val; 
    } 

    function changeForeground(val) { 
     obj.style.color = val; 
    } 

    function changeBackground(val) { 
     obj.style.backgroundColor = val; 
    } 
</script> 

Answer 4

您可以使用jQuery，如果它提供給你：

$(document).ready(function(){ 

    $('#fontList').change(function(){ 
     $('#change').css("font-family", $(this).val());  
    }); 

    $('#foregroundList').change(function(){ 
     $('#change').css('color', $(this).val());  
    }); 

    $('#backgroundList').change(function(){ 
     $('#change').css('background-color', $(this).val());  
    }); 

}); 

Answer 5

我做的第一個，但其餘的將是相同的。

我添加了一個onchange事件來選擇輸入：

<select name="font" id="font" onchange="change()"> 
<option value="Arial">Arial</option> 
<option value="Tahoma">Tahoma</option> 
<option value="Georgia">Georgia</option> 
</select> 

一個JavaScript函數，改變基於輸入div樣式：

<script> 
function change(){ 
    var change=document.getElementById('change'); 

    var font=document.getElementById('font'); 
    if(font.value == "Arial"){ 
    change.style.font-family= "Arial"; 
    }else if(font.value == "Tahoma"){ 
    change.style.font-family= "Tahoma"; 
    }else if(font.value == "Georgia"){ 
    change.style.font-family= "Georgia"; 
    } 
} 
</script>