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

【问题标题】：How change style of a div using select options如何使用选择选项更改 div 的样式
【发布时间】：2014-12-03 14:01:13
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

所以如果选择的选项是 Arial、Red 和 Red，你会希望 div 显示吗？
你自己的 JavaScript 尝试在哪里？
JavaScript 是关键。你自己试过什么？
@George 我尝试了从其他地方复制和粘贴的 js 代码，但它不起作用。我不擅长js

标签： javascript html innerhtml

【解决方案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());    
  });

});

【讨论】：

@George 你不知道 JQuery 也是 Javascript 吗？他想要简化的解决方案，我给了他一个。
@George 我真的很想知道你是怎么决定他不能在你自己的地方使用 JQuery 的。这是一个你真正学到东西的网站。我用不同的方法给了他一个答案。使用这个答案是他自己的选择，不是你的。这个答案没有错，也没有关系，所以对此投反对票并抨击我只会让你很可悲。
问题是这不是一个javascript问题。他甚至不知道关于 javascript 的 jack squat。我说“不要忘记”是为了暗示以下代码仅适用于 JQuery。我知道他会在不包括图书馆的情况下尝试这个并失败。我其实很关心他。乔治，你的答案在哪里？你在哪里帮助他？你所做的只是评论“谁说过关于 jQuery 的事？”在 JQuery 答案下。
所以现在你的问题在于 OP，而不是我。哇，我可以清楚地看到你为什么完成了。祝你有美好的一天。
@George - 获得生命。严重地。 OP 无济于事，但总的来说，即使没有要求，建议 jQuery 解决方案也没有错。借助这个 80KB 的小库，很多事情都变得如此简单，以至于我们这些专注于完成工作的人可以毫无问题地使用它，并将其推荐给其他人。

【解决方案2】：

这是一个使用纯 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。

【讨论】：

我无法让它在我的网站上运行。需要哪些标签来封装 js，它是放在头部还是正文中（对不起，我缺乏知识）
@VirtualBloke 将整个代码放在标记中，并将其添加到结束

【解决方案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>

【讨论】：

【解决方案4】：

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

我在选择输入中添加了一个 onchange 事件：

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

一个基于输入改变div样式的javascript函数：

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

【讨论】：

这段代码有几个问题：change和font是一回事，不需要通过id来获取font，在this值中有引用。也不需要 if 和 else，您可以将 this.value 分配给 change 属性。
@ianaya89 有一个错字，我改正了。

【解决方案5】：

首先，我会调整一些东西以简化以后的编码......

<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 显然应该是您要操作的 div。

【讨论】：

太棒了......谁没有说 jQuery。没有它也可以完成，这很容易成为模板。