Question

我正在尝试以下事情：如果我检查单选按钮（id绿色）div类＆＃34; app-bar＆＃34;应替换为div类＆＃34; app-bar green＆＃34;。我已尝试使用以下代码，但不知何故它不起作用。有人能帮助我吗？

JavaScript代码：

var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
if (defaulttheme.checked) {
    document.getElementsByClassName("app-bar").className = "app-bar";
} else if (greentheme.checked) {
    document.getElementsByClassName("app-bar").className = "app-bar green";
}

单选按钮的代码：

<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="default" checked>
    <span class="check"></span>
</label>
<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="green">
    <span class="check"></span>
</label>

Image

Answer 1

我相信你希望它像这样？仅当您使用类className定位返回的元素数组列表的某个索引时，app-bar属性才可用。

＆＃13;

var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");
defaulttheme.addEventListener('change',update);
greentheme.addEventListener('change',update);

function update(){
  if (defaulttheme.checked) {
      document.getElementsByClassName("app-bar")[0].className = "app-bar";
  } else if (greentheme.checked) {
      document.getElementsByClassName("app-bar")[0].className = "app-bar green";
  }
}

＆＃13;

<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="default" checked>
    <span class="check"></span>
</label>
<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="green">
    <span class="check"></span>
</label>

<div class="app-bar">test</div>

＆＃13;

Answer 2

您可以在示例中使用querySelector返回文档中第一个匹配的元素元素，然后您可以在该元素上使用Element.className属性来设置类属性。

document.getElementsByClassName（）返回找到的元素的实时HTMLCollection，你必须先使用index / loop来获取元素，然后使用Element.className属性来设置class属性。

＆＃13;

var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");

defaulttheme.addEventListener("click", themeChange);
greentheme.addEventListener("click", themeChange);


function themeChange() {
  if (defaulttheme.checked) {
    document.querySelector(".app-bar").className = "app-bar";
  } else if (greentheme.checked) {
    document.querySelector(".app-bar").className = "app-bar green";
  }
}

＆＃13;

div.app-bar {
  height: 50px;
  background: grey;
}
div.app-bar.green {
  height: 50px;
  background: green;
}

＆＃13;

<div class="app-bar">
</div>

<label class="switch">
  <input type="radio" class="checkbox" name="portion_num" id="default" checked>
  <span class="check"></span>
</label>
<label class="switch">
  <input type="radio" class="checkbox" name="portion_num" id="green" >
  <span class="check"></span>
</label>

＆＃13;

Answer 3

要通过JavaScript获取元素，您有两种方法：

element = document.getElementByClassName("app-bar");
或者我更喜欢这种方式：
element = document.querySelector(".app-bar");
然后，您不要将“app-bar”更改为“app-bar green”，而是添加“green”类。您可以通过以下代码执行此操作： element.classList.add("green")。
所以，我们可以有这个代码：

var defaulttheme = document.getElementById("default");
var greentheme = document.getElementById("green");

if (greentheme.checked) {
    document.querySelector(".app-bar").classList.add("green");
}

<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="default" checked>
    <span class="check"></span>
</label>
<label class="switch">
    <input type="radio" class="checkbox" name="portion_num" id="green">
    <span class="check"></span>
</label>

我如何通过Javascript更改div类

3 个答案: