前端项目实战6：js中常用的dom操作（隐藏or显示div）

一、 点击元素之外的空白处，隐藏该元素

做这个搜索面板：

想要实现搜索之后弹出面板，点击页面其他地方，该面板隐藏

只需要：

document.addEventListener('click',function(){
result.style.display='none';
})

二、dom好用又重要的几个知识点

①xxx.style.style样式里面的css属性

<div class="r_area" style="display:none;" replyid="'.$res2['id'].'">
<input type="text" name="question" class="replyarea" placeholder="请写下您的回答！">
<button class="publish" replywho="'.$res2['id'].'">发表</button>
</div>

Look this!  style="display:none;"，经过点击后，要让这部分显示：

做法：

e.target.nextElementSibling.style.display="block";

先获取到这个div元素，再通过style.display来修改。把none改成block！即可显示。

 ②获取属性：getAttribute

<button class="publish" id="surepublish" landid=<?php echo $id;?> >发表</button>

surepublish.getAttribute('landid');

这里的landid是我自定义的属性。与①区分，由于这里不是style里的样式属性，所以要用getAttribute('landid');来获取！！！

③setAttribute

想要在js中为元素添加属性

setAttribute（'landid','1'）

注意，添加和修改都可以用这个，如果你只是想获取属性值，就用②

④事件委托时

想要获取当前事件的元素的 next兄弟，并修改它的display样式属性，改不可见为可见！

e.target.nextElementSibling.style.display="block";

最后

以上就是甜美毛衣为你收集整理的前端项目实战6：js中常用的dom操作（隐藏or显示div）的全部内容，希望文章能够帮你解决前端项目实战6：js中常用的dom操作（隐藏or显示div）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。