如何用原生js实现点击子级a标签给父级div添加class再点击就移除class_IT百科

<!DOCTYPE html>

<html>

<head>

<style>

.tdiv{

border:2px solid

}

</style>

function test(ele){

var pDiv=ele.parentNode

if(pDiv.className==" "){

pDiv.className="tdiv"

}else{

pDiv.className=" "

}

//还可以用classList，这种方法更流畅

function test2(ele){

var pDiv=ele.parentNode

if(pDiv.classList.contains("tdiv")){

pDiv.classList.remove("tdiv")

}else{

pDiv.classList.add("tdiv")

}

</script>

</head>

<body>

<div>

</div>

</body>

</html>

以给 body 标签添加 class 为例

通过 jQuery

$( 'body').addClass( 'class1 class2' )

$( 'body' ).removeClass( 'class1 class2' )

支持 classList 的高级浏览器（IE10+，Chrome，Firefox，Safari）

document.body.classList.add( 'class1', 'class2' )

document.body.classList.remove( 'class1', 'class2' )

不支持 classList 的浏览器只能通过 className 来添加

document.body.className += ' class1 class2'

欢迎分享，转载请注明来源：内存溢出

如何用原生js实现点击子级a标签给父级div添加class再点击就移除class