如何使用选择选项更改div的样式

时间:2014-12-03 14:01:14

标签: javascript html innerhtml

我尝试使用innerhtml选择选项下拉列表来改变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>

5 个答案:

答案 0 :(得分:1)

可以使用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());    
  });

});

答案 1 :(得分:0)

您还没有将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>

答案 2 :(得分:0)

以下是使用纯 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

答案 3 :(得分:-1)

我做了第一个,但其余的都是一样的。

我在选择输入中添加了一个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>

答案 4 :(得分:-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>

...现在,您可以连接到班级并处理&#34;更改&#34; ...

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

#divToChange 应该显然是你想要操纵的div。