Web開發中的顯示與隱藏

2022-10-10 20:18:13 字數 1005 閱讀 1200

大多數程式語言,在平開發過程中,都是會遇到一些特殊的場景,需要實現顯示或者隱藏來達到我們想要的效果;然而實現的方式有多種,今天就寫一下,希望可以幫到各位。

小編我學習前端1年了,特意寫寫部落格來回顧一下。

方式1:

css的方式實現

1:設定樣式:visibility:hidden/visible;隱藏和顯示,

2:設定樣式:

display:none/(inline/block)隱藏和(內聯元素顯示/塊級元素顯示),

兩者之間的區別:『visibility 隱藏之後會佔布局空間,而display則不會佔布局空間。

方式2:

js的方式來操作,有的時候可以根據點選事件來實現隱藏和顯示

1:

document.getelementbyid("id").style.visibility="visibe";

document.getelementbyid("id").style.visibility="hidden";

2:

document.getelementbyid("id").style.display="none";

document.getelementbyid("id").style.display="inline";

這兩種方式,是以css的基礎上,用js來實現。

方式3:

jquery的方式實現

$(function

());

});$(

function

());

});

前提:因為jquery就是js基礎之上封裝的乙個工具,所以使用前得引入 jquery.js

如:

text/j**ascript" src="../css/jquery-1.8.3.js" >

目前我就弄了這幾種,其他的方式還在學習中,後續補上。

html中的隱藏與顯示

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none 這個試了一下貌似不行,得寫成style visibility hidden 才行。document.getelementbyid typediv1 style.visibili...

css與jq中的顯示與隱藏

css display 顯示 與 visibility 可見性 display屬性設定乙個元素應如何顯示,visibility屬性指定乙個元素應可見還是隱藏。隱藏元素 display none或visibility hidden 隱藏乙個元素可以通過把display屬性設定為 none 或把visi...

WPF中控制項的顯示與隱藏

visibility表示 獲取或設定此元素的使用者介面可見性,並且是依賴項屬性 子屬性值 說明visible 表示顯示元素 collapsed 表示不顯示 隱藏 元素,並且不在布局中為它保留空間 hidden 表示不顯示 隱藏 元素,但是在布局中為元素保留空間 3 例 a a.count 1 vis...