隐藏div的四种方式

隐藏div是指所选择的div不显示在页面上，但是隐藏后有两种效果
1.隐藏过后的div的位置还是被占用了
2.隐藏过后的div的位置没有被占用
下面看几种隐藏div的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {width: 300px;height: 300px;border: 1px red solid;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="box"></div>哈哈哈哈
<script src="common.js"></script>
<script>document.getElementById("btn").onclick = function () {//隐藏div的三种方式// document.getElementById("box").style.display = "none";// 不占位// document.getElementById("box").style.visibility="hidden";//占位// document.getElementById("box").style.opacity=0;//占位document.getElementById("box").style.height="0px";document.getElementById("box").style.border="0px red solid";//占位}
</script></body>
</html>

隐藏div的四种方式相关推荐

div清除浮动的四种方式
div 清除浮动的四种方式清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
pdf转换为html5,PDF转换为HTML5的四种方式
原标题:PDF转换为HTML5的四种方式这里有四种方法能让你把一个PDF文件转换为HTML5格式,但选择哪一种方式就取决于你的优先事项.IDR解决方案已经花费超过四年的时间来处理这个问题了.我们发现 ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
angular cli 切换 css_漫谈 Angular 定制主题的四种方式
主题定制是提升用户体验最常见的一种,前端框架众多,主题定制方式却异曲同工,下面来介绍一下 Angular 中实现主题定制的四种方式. 1. webpack loader React 版本的 Ant D ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
深入解析react关于事件绑定this的四种方式
这篇文章主要介绍了详解react关于事件绑定this的四种方式,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 在react组件中,每个方法的上下 ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
jquery获取元素四种方式。
jquery获取元素四种方式. 当你成功引入jquery插件之后,就可以用jquery的语法来获取html元素. js获取只有document.getElementById或者通过名称来获取. 而jq ...

隐藏div的四种方式

隐藏div的四种方式相关推荐

最新文章

热门文章