gpt4 book ai didi

javascript - 在加载时设置选择元素的选项样式

转载 作者:行者123 更新时间:2023-11-28 05:14:54 25 4
gpt4 key购买 nike

我的网页加载内容如下:

<script>     
function updateStateSelectColor(){
var elm = document.getElementById("state");
elm.style.color="black";
}
</script>

<select id="state" onchange="updateStateSelectColor()">
<option value="AL">Alabama</option>
<option value="FL" selected>Florida</option>
</select>

我想要的是,当页面加载时,状态选择框中选定的文本会以黑色粗体显示,就像我的 onchange 函数将文本变黑一样。 问题是我的 JavaScript 仅适用于 onchange 而不是 onload

最佳答案

有多种方法可以实现这一目标。

  1. 使用 document.addEventListener() DOMContentLoaded 添加回调事件:

document.addEventListener("DOMContentLoaded", function(event) {
updateStateSelectColor();
});
function updateStateSelectColor(){
var elm = document.getElementById("state");
elm.style.color="green";
}
<select id="state" onchange="updateStateSelectColor()" style="color: red">
<option value="AL">Alabama</option>
<option value="FL" selected>Florida</option>
</select>

甚至可以将函数直接绑定(bind)到事件监听器,但请记住,函数将接收对事件的引用作为第一个参数。

      document.addEventListener("DOMContentLoaded", updateStateSelectColor);
  • 将该功能分配给 window.onload 属性(property)
  • window.onload = function(event) {
    updateStateSelectColor();
    };
    function updateStateSelectColor(){
    var elm = document.getElementById("state");
    elm.style.color="green";
    }
    <select id="state" onchange="updateStateSelectColor()" style="color: red">
    <option value="AL">Alabama</option>
    <option value="FL" selected>Florida</option>
    </select>

  • 使用onload <body> 的属性标签

  • 定义函数后立即调用该函数(如 bassxzero's comment 中所述)。

  • 关于javascript - 在加载时设置选择元素的选项样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41048237/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com