溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
（1）display:設(shè)置屬性display:none；,該元素被隱藏，而且該元素的子孫后代也被同時(shí)隱藏，此時(shí)被隱藏的元素不占據(jù)任何空間，用戶的交互操作在此元素上不能生效，但是通過js語句操作dom可以來操作該隱藏元素。
實(shí)例：
.display-hide {
display: none;
transition: all ease 0.8s;
}
.display-hide:hover { /* 當(dāng)鼠標(biāo)懸浮在該元素時(shí)，設(shè)置為block,此時(shí)元素也不會(huì)出現(xiàn) ，因?yàn)楸籨isplay隱藏的元素，不占據(jù)任何空間，用戶的交互操作也不能生效*/
display: block;
}
.display-hide p {/* 同樣的隱藏元素的子孫后代元素也會(huì)被隱藏，即使后代元素屬性設(shè)置為block */
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>鼠標(biāo)移近來，然后在點(diǎn)擊有驚喜哦</div>
<div class="display-hide"><p>0</p></div>
<div>第三個(gè)div塊</div>
<script>
var count = 0;
var DHide = document.getElementsByClassName('display-hide');
var Div = document.getElementsByTagName('div');
Div[0].addEventListener("mouseover", function(){
count++;
DHide[0].innerHTML = '<p>' +'你的鼠標(biāo)移近第一個(gè)div：'+ count + '次'+'</p>';
});
Div[0].addEventListener("click", function(){
DHide[0].style.display = "block";
});
</script>
</body>效果圖：
此例子中，第二個(gè)div元素被隱藏，于此同時(shí)它的子元素p也被隱藏了，當(dāng)用戶有對(duì)第二個(gè)div有交互行為，此時(shí)是不起作用的，但通過js語句可以來操作該元素，使開元素顯示。
（2）opacity:設(shè)置屬性opacity:0；，只是從視覺的角度隱藏了該元素，而該元素本身還是占據(jù)頁面中的布局，而且，這種隱藏會(huì)響應(yīng)用戶的交互。
實(shí)例：
<style>
div {
padding: 60px;
width: 60px;
font-size: 14px;
background: pink;
text-align: center;
margin: 1%;
float: left;
cursor: pointer;
}
/* 該元素雖然被隱藏了，看不見了，但它在頁面中的位置還是存在的 */
.opacity-hide {
opacity: 0;
transition: all ease 0.8s;
}
/* 當(dāng)鼠標(biāo)移動(dòng)到這個(gè)隱藏元素上面，元素顯示，此時(shí)響應(yīng)了用戶的交互行為 */
.opacity-hide:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>1</div>
<div class="opacity-hide">2</div>
<div>3</div>
</body>效果圖：
此例中第二個(gè)div被隱藏了，我們看不見了，但是它在頁面中的位置還是存在著，對(duì)用戶的操作還是會(huì)做響應(yīng)的，當(dāng)鼠標(biāo)滑動(dòng)到第二塊div時(shí)，顯示。
（3）visibility：設(shè)置屬性visibility:hidden;,該元素被隱藏，同樣隱藏的元素對(duì)頁面的布局仍起作用，但它不會(huì)影響任何用戶交互，而且它的子孫元素也會(huì)在設(shè)置為visibility：visible。
.visibility-hide {
visibility: hidden;
transition: all ease 0.8s;
}
/* 雖然設(shè)置了隱藏效果，但是不會(huì)影響用戶的交互操作 */
.visibility-hide:hover {
visibility: visible;
}
/* 父元素被隱藏了，這時(shí)設(shè)置子元素為顯示狀態(tài)，此時(shí)子元素顯示，但父元素不會(huì)顯示 */
.visibility-hide p {
visibility: visible;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>1</div>
<div class="visibility-hide"><p id="visi-p">2</p></div>
<div>3</div>
<script>
var oHide = document.getElementsByClassName('visibility-hide');
var oHideP = document.getElementById('visi-p');
var count = oHideP.innerHTML;
oHide[0].addEventListener("click", function(){
count++;
oHideP.innerHTML = count;
});
</script>
</body>效果圖：
此例中，當(dāng)鼠標(biāo)移近第二個(gè)div時(shí)，div的visibility屬性變?yōu)関isible,并為之綁定點(diǎn)擊事件。
（4）Position：posiition:absolute;
top:-2880px;
Left:-2880px;
通過設(shè)置top,left的值，將元素放在屏幕的可視區(qū)域外，這樣就達(dá)到了元素隱藏的效果。
.position-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
input{
position: absolute;
top:-2880px;
left:-2880px;
}
/* 這個(gè)用戶效果不會(huì)起作用，因?yàn)榇藭r(shí)的div不在可視區(qū)內(nèi) */
.position-hide:hover {
position: static;
}
</style>
</head>
<body>
<div>點(diǎn)擊元素，有驚喜</div>
<div class="position-hide"><p>0</p></div>
<div><input type="radio" value = "獲得焦點(diǎn)">3</div>
<script>
var count = 0;
var oHide = document.getElementsByClassName('position-hide');
var Div = document.getElementsByTagName('div');
var input = document.getElementsByTagName('input');
Div[0].addEventListener("mouseover", function(){
count++;
oHide[0].innerHTML = '<p>' +'你的鼠標(biāo)移近第一個(gè)div：'+ count + '次'+'</p>';
});
Div[2].addEventListener("click",function(){
input[0].style.position = "static";
});
Div[0].addEventListener("click", function(){
oHide[0].style.position = "static";
});
</script>
</body>效果圖：
總結(jié)： display,opacity,visibility,position，這四種元素隱藏元素各有優(yōu)缺點(diǎn)，在實(shí)際的使用中根據(jù)需要，選擇合適的。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼