在锚元素内更改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> 

How can I change the class attribute value of div inside the anchor element in onclick event "onClickEv" in my external javascript. Is it possible?

Answer 1

Assign an Id to your Div element and use below code to achieve this :

var element = document.getElementById("div-id");
if (element !== null) {
  if (element.className == "div_className") {
    element.className = "div_newClassName";
  } else {
    // add this else only in case you want to toggle the class
    element.className = "div_className";
  }
}

Answer 2

You can change class name in javascript as shown below code snippet.

 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> 

OR

You can do it using JQuery addClass , removeClass function.

Replace below line in onClickEv function and add jQuery library in html header.

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