顯示隱藏的方法總結

原創 brain_bo 2020-06-30 23:15
怎麼讓一個元素顯示隱藏呢？

css：

display：none / block；//完全消失，不佔文檔寬高

opacity：0 / 1；//完全透明，但還是文檔流內，有大小

visibility：hidden / visible；//相當於透明，還存在於文檔流中，有大小

JQuery：

$(ele).hide() / show();

$(ele).fadeOut(500) / fadeIn(500);//500ms漸隱漸入

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

getComputedStyle方法與currentStyle屬性獲取元素樣式

1、getComputedStyle() getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值（計算之後的最終結果，如2em計算後的結果。此外，即使沒有CSS代碼，也會把默認的祖宗八代都顯示出來）。返回

秋天1014童话 2020-07-07 00:47:29

CSS3彈性盒子筆記

老馬CSS3彈性盒子筆記flex-direction屬性決定主軸的方向<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>

Night_Emperor 2020-07-05 23:38:55

微信端禁止長按保存圖片到本地

添加一行樣式搞定 img{     pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none; }

于先生2020 2020-07-05 19:48:47

CSS3實現三角小圖標

CSS3的transform可以實現頁面元素的扭轉、變形等功能。 實現如下圖所示的三角形小圖標只需要transform定義的一行代碼即可，無需再使用圖片。 代碼如下： <!DOCTYPE html> <html> <head>

天南韩立 2020-07-05 04:49:00

60個非常實用的CSS代碼片段，推薦收藏

快捷目錄垂直對齊伸展一個元素到窗口高度基於文件格式使用不同的樣式創建跨瀏覽器的圖像灰度背景漸變動畫CSS：表格列寬自適用只在一邊或兩邊顯示盒子陰影包裹長文本製造模糊文本樣式重置典型的CSS清除浮動新版清除浮動（2011）跨瀏覽器的

Silvia250 2020-07-05 03:48:24

前端開發必須掌握的10個CSS選擇器

快捷目錄一、元素或組選擇器二、#id選擇器三、.class選擇器四、屬性選擇器五、後代選擇器六、子選擇器七、相鄰和通用同級選擇器八、星號選擇器*九、僞類和僞元素十、nth-type和nth-child 對於任何網站而言，要讓用戶產

Silvia250 2020-07-05 03:48:23

03-漸變

徑向漸變 與其他漸變相同，徑向漸變是一個不固定尺寸的圖片，譬如，它沒有默認尺寸、比例。具體尺寸由它所定義的元素尺寸決定。 徑向漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stop

语录晨话 2020-07-04 15:28:58

01-漸變

漸變 漸變是一種有規律性的變化。漸變能給人很強的節奏感和審美情趣。這種形式在日常生活中隨處可見，是一種常見的視覺形象。 在css 3中漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 css 3中漸

语录晨话 2020-07-04 15:28:58

02-漸變

漸變 漸變配合js可以實現動態 background-image: linear-gradient(90deg,rgb(0,0,225),rgb(225,0,0) 0%,rgb(0,0,225)); 我們可以通過js來控制

语录晨话 2020-07-04 15:28:58

04-漸變

重複漸變 重複漸變，在渲染時，終止顏色會在兩個方向上無限重複，它們的位置以最後指定的終止顏色的位置和第一個指定的終止顏色的位置之間的差值的倍數移位。 例如，repeating-linear-gradient(red 10px, b

语录晨话 2020-07-04 15:28:58

CSS3學習筆記-04-詳解各種文本修飾

文章目錄一、字體的使用1.1定義字體 @font-face二、字體樣式2.1 字重定義 font-weight2.2 字號 font-size2.3 行高設置 line-height2.3 字體風格 font-style2.4 組

疯狂的地球人 2020-07-04 03:08:52

前端知識學習-----居中佈局的多種實現方法

水平居中的幾種實現方式 01. inline-block + text-align 上代碼： <div class="parent"> <div class="child">DEMO</div> </div>

kf_qyl 2020-07-03 05:37:18

【示例代碼】基於jQuery和CSS3的圖片層疊效果插件

一款基於jQuery和CSS3 圖片層疊效果特效，鼠標滑過圖片，圖片就會像扇子一樣展開，非常流暢自然。建議開發童鞋使用跨平臺開發工具——統一開發環境UDE來進行查看、調試、開發~~~統一開發環境（UDE）官網：http://dev.100

cmcc_ude 2020-07-02 08:12:43

div水平垂直居中方法彙總(共六種)

文章目錄第一種第二種第三種第四種第五種第六種 第一種 絕對定位方法：不確定當前div的寬度和高度，採用 transform: translate(-50%,-50%); 當前div的父級添加相對定位（position: rela

Hello Simon 2020-07-02 05:44:38

css教程系列17:HTML塊級元素&amp;行內元素之分: &lt;div&gt; 和&lt;span&gt;

1 HTML 區塊元素: 大多數 HTML 元素被定義爲塊級元素或內聯元素。1.1 塊級元素實例: <div> <h1>, <p>, <ul>, <table>   塊級元素的特點: 獨佔一行,可設置寬高1.2 行級元素實例 :<span

邢晋宇 2020-07-02 03:20:42