js 简单的开关门做法

JS操作DOM示例

最新推荐文章于 2020-08-08 21:44:41 发布

原创最新推荐文章于 2020-08-08 21:44:41 发布 · 264 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #toggle #html #css #ViewUI

利用js实现读取并修改元素的内容

点击“<<”将树形列表隐藏并将“<<”修改为“>>”，点击“>>”后将树形列表显示出来。

实现代码如下：

<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
      div{float:left; height: 100px; line-height: 100px; }
      #d1,#d3{ background-color: #ccff00; }
      #d2{ cursor: pointer; background-color: #ffcc00; }
</style>
<script>
 function toggle(d2){
      //注意：d2.innerHTML-->原文 
     //  .textContent-->翻译后的字符
     //如果d2的内容是<<
      if(d2.innerHTML=="&lt;&lt;"){
      //   d2的内容改为>>
      d2.innerHTML="&gt;&gt;";
      //   找到旁边的d1，隐藏
    document.querySelector("#d1").style.display="none";
      }else{//否则
    //   d2的内容改为<<
    d2.innerHTML="&lt;&lt;";
    //   找到旁边的d1，显示出啦
   document.querySelector("#d1").style.display="block";
    }
  }
</script>
</head>
<body>
	<div id="d1">树形列表</div>
	<div id="d2" onclick="toggle(this)">&lt;&lt;</div>
	<div id="d3">内容的主体</div>
</body>
</html>