Question

我在加载网页时有以下内容：

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

Answer 1

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

使用document.addEventListener()为DOMContentLoaded事件添加回调：

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) {
  updateStateSelectColor();
});
function updateStateSelectColor(){
  var elm = document.getElementById("state");
  elm.style.color="green";
}

＆＃13;

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

＆＃13;

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

      document.addEventListener("DOMContentLoaded", updateStateSelectColor);

将功能分配给window.onload属性

＆＃13;

window.onload = function(event) {
  updateStateSelectColor();
};
function updateStateSelectColor(){
  var elm = document.getElementById("state");
  elm.style.color="green";
}

＆＃13;

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

＆＃13;

使用<body>代码的onload属性
定义后立即调用该函数（如bassxzero's comment中所述）。

为select元素

1 个答案: