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

JavaScript018

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

<!DOCTYPE html>

<html>

 <head>

  <title>测试页面2</title>

  <meta charset="UTF-8"/>

  <style>

   .tdiv{

    border:2px solid

   }

  </style>

  <script>

   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>

   <a onclick="test(this)">测试</a>

  </div>

 </body>

</html>

添加节点append;移除节点removeChild;移动节点:var sdds=document.getElementById;创建节点createTextNode();查找节点:document.getElementsByTagName。

其他方法:

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id,唯一性

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('div').css('margin-left', 0)。

3、浏览器运行index.html页面,此时div中的style属性的margin-left被成功去除。