js隱藏顯示div頁面方法

2021-10-24 14:03:01 字數 1111 閱讀 4143

首先,先上圖

這是js**

這是h5及css樣式

效果圖,由於用於測試,比較簡陋,不要在意,哈哈哈哈!

給大家測試**,有需要可以複製 顯示

隱藏你好世界!

第一種方法:

document.getelementbyid('demo').style.visibility="hidden";//隱藏

document.getelementbyid('demo').style.visibility="visible";//顯示

第二種辦法:

document.getelementbyid('demo').style.display="none";//隱藏

document.getelementbyid('demo').style.display="block";//顯示

兩辦法呢,你可以這樣理解:

第一種呢,你隱藏,就像你拿乙個布條將你不想看見的東西蓋著,但是呢,它還是在那裡,你想看見它了,你就把布條拿掉。

所以說第一種方法隱藏,雖說是你是看不見它了,但是它還是在那裡,只是被蓋著了,還是占用的你頁面空間。

第二種呢,你隱藏,就像你把你不想看見的東西放到你的抽屜裡,你想看見它,又把它從抽屜裡拿出來,所以第二種方法,你隱藏了,它不會占用你的空間。但是呢,如果你想你隱藏的頁面事件響應就不推薦你用第二種辦法,如果它被隱藏,它裡面的東西會休眠,裡面的事件就不響應了,只有將它顯示才會響應。

所以呢,要用哪個方法,要看你的需求,不同地方用不同方法

利用JS做到隱藏div和顯示div

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...

利用JS做到隱藏div和顯示div!!

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...

div顯示隱藏

內容 div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid t...