Question

我有一个需要修改的HTML网页。

我在HTML页面上创建了一个表单（下拉列表），让用户选择背景颜色（黄色，白色等），但这是用户选择选项时出现的问题，我不知道该怎么做。精确执行它。

下面是我的HTML代码：

$(“#background”).css(“backgroundcolor”, “yellow”):

还有我的JavaScript代码（使用jQuery库）：

<button id="inc-fps-btn"
    class="ui button"
    style="height:20px;
           width:20px;
           overflow:hidden">
<img src="http://www.placehold.it/30/000" style="width:100%;height:100%">

以上仅导致黄色背景。

是否有一种方法可以根据用户的选择来实现，而不是通过仅将其设置为特定颜色（此实例为黄色）来对其进行硬编码？

我该如何实现？

Answer 1

您可以像这样在Select Input上添加onChange函数。

function changeBackgroundColor(e) {
    var value = $(e.currentTarget).val();
    if(value) {
        $('#background').css('backgroundcolor', value);
    }
} 
$('#background').on('change', changeBackgroundColor);

Answer 2

尝试一下。

<div>
<label for=“background”>color of background</label>
<select name=“background” class="set-bg" id=(“background”)>
<option value=“yellow”>yellow</option>
<option value=“Orange”>orange</option>
<option value=“Purple”>purple</option>
</select>
</div>

<script type="text/javascript">
    $(ducument).ready(function(){
        $('.set-bg').change(function(){
            $(“#background”).css(“backgroundcolor”, $(this).val());
        });
    });
</script

Answer 3

首先，这是我的代码，其解释如下：

HTML：

<body>
    <div>
        <label for='background'>color of background</label>
        <select name='background' id='background' onclick="changeBackground()">
            <option value='yellow'>yellow</option>
            <option value='orange'>orange</option>
            <option value='purple'>purple</option>
        </select>
     </div>
</body>

Javascript：

function changeBackground(){
var x = document.getElementById('background').value;
document.body.style.backgroundColor = x;
}

所以这是发生了什么事，我创建了一个名为changeBackground（）的函数，当选择一个选项时它将自动运行。注意：我确实改变了您体内的某些事物，主要是使用'代替“

注意：这会更改该会话的主体颜色，并且不会将其保存到html文件或css文件中。

希望这会有所帮助，如果您认为这是正确的答案，请“检查”它！

Answer 4

要更改选择框的颜色，您需要更改选项元素的颜色。像这样：

$(function() {
   
$('select').on('change', function() {
  $('option').css('background-color',this.value);
})
    
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
<label for=“background”>color of background</label>
<select name=“background” id=“background”>
<option>yellow</option>
<option>orange</option>
<option>purple</option>
</select>
</div>

用表单选择更改html样式？

4 个答案: