javascript - 更改 anchor 元素内 div 的类名

Question

function onClickEv(child){
  //change the class from div_className to div_newClass
  console.log(child);
}

<a href="page url" id="a_idName" target="_blank" onclick="onClickEv(this)" class="a_className">
   <div class="div_className">text here</div>
</a>

如何在外部 javascript 的 onclick 事件 "onClickEv" 中更改 anchor 元素内 div 的类属性值。可能吗？

Answer 1

您可以在 JavaScript 中更改类名称，如下面的代码片段所示。

function onClickEv(child){
  //change the class from div_className to div_newClass
   
 child.getElementsByTagName("div")[0].className = "div_newClassName";

   console.log(document.getElementById("a_idName").innerHTML);
}

<a href="page url" id="a_idName" target="_blank" onclick="onClickEv(this)" class="a_className">
   <div class="div_className">text here</div>
</a>

或

您可以使用 JQuery addClass、removeClass 函数来完成此操作。

替换 onClickEv 函数中的以下行，并在 html header 中添加 jQuery 库。

$("#a_idName div").removeClass('div_className').addClass('div_newClassName');