时间戳

首页 > 解决方案 > 单击复选框时如何设置标签标签的样式？

javascript - 单击复选框时如何设置标签标签的样式？

问题描述

我有一个像这样的 html 标记。

<html>
<head></head>
<body>
<input type="checkbox" id="Randomly generated ID" onclick="fun()">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>

单击复选框时，我想使用 javascript 中的 fun() 函数将 CSS 样式添加到标签标签。我在这样做时遇到了麻烦，而且这两个元素都有一个随机生成的 ID，并且不能有相同的 ID。

标签： javascripthtmlcss

解决方案

这是使用Vanilla Js的实现。

function fun(inputElement) {
  var backgroundColor = inputElement.checked ? 'yellow' : 'white';
  var labelSelector = 'label[for="' + inputElement.id + '"]';
  var labelElement = document.querySelector(labelSelector);
  inputElement.style.background = backgroundColor;
  labelElement.style.background = backgroundColor;
}
<html>

<head></head>

<body>
  <input type="checkbox" id="CHECKBOX_ID" onclick="fun(this)">
  <label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>

</html>

希望这会对你有所帮助，谢谢。

推荐阅读