前端頁面隱藏元素

来源:http://www.cnblogs.com/niuni-623/archive/2017/02/25/6442555.html
-Advertisement-
Play Games

display:none和visible:hidden都能把網頁上某個元素隱藏起來,但兩者有區別: display:none 不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失。 visible:hidden 使對象在網頁上不可見,但該對象在網頁上扔占據著空間。 例子: <html><head ...


 

display:none和visible:hidden都能把網頁上某個元素隱藏起來,但兩者有區別:

display:none ---不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失。

visible:hidden--- 使對象在網頁上不可見,但該對象在網頁上扔占據著空間。

例子:

<html>
<head>
<title>display:none和visible:hidden的區別</title>
</head>
<body >
<span style="display:none"> 隱藏區域</span>

<span style=" background-color:Green">顯示區域</span><br />
<span style="visibility:hidden"> 隱藏區域</span>

<span style="background-color:Green">顯示區域</span>
</body>
</html>

註意:只寫display:none是不起作用的,style="display:none"中的style=""不能省


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言:這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新! 1. css盒模型有標準盒模型和IE盒模型,結構是:content、padding、border、margin。 css3有個box-sizing屬性,設置用哪種盒模型; box-sizing:conten ...
  • 概述 typeof操作符返回一個字元串,指示未經計算的操作數的類型。 語法 常規用法 null 問題 // 在 JavaScript 最初的實現中,JavaScript 中的值是由一個表示類型的標簽和實際數據值表示的。對象的類型標簽是0。由於 null 代表的是空指針(大多數平臺下值為0x00),因 ...
  • 前言: 今天寫一篇jQuery,發現內容太多了,那就分成兩篇寫吧……寫完jQuery基礎知識後會再寫一些jQuery實例~~ jQuery下載。jQuery是一個相容多瀏覽器的javascript庫,核心理念是write less,do more(寫得更少,做得更多),對javascript進行了封 ...
  • JavaScript-警告(alert 消息對話框) 註意: 1. 在點擊對話框"確定"按鈕前,不能進行任何其它操作。 2. 消息對話框通常可以用於調試程式。 3. alert輸出內容,可以是字元串或變數,與document.write 相似。 // JavaScript-確認(confirm 消息 ...
  • 在 "單線程JavaScript" 這篇文章中,在介紹JavaScript單線程的同時,也介紹了setTimeout是如何工作的。但是對於定時器的一些內容,並沒有做深入的討論。這篇文章,會詳細說說JS的兩種定時器,setTimeout和setInterval,以及它們的工作方式。同時,會談談有關se ...
  • jQuery的開發速度很快,幾乎每半年一個大版本,每兩個月一個小版本。 每個版本都會引入一些新功能。今天我想介紹的,就是從jQuery 1.5.0版本開始引入的一個新功能 deferred對象。 這個功能很重要,未來將成為jQuery的核心方法,它徹底改變瞭如何在jQuery中使用ajax。為了實現 ...
  • 關於響應式佈局現才接觸到,雖然代碼很簡單,但是對基礎要求還是有一些。 1.left設置position:absolute和width:70px;那麼右邊用margin-left:70px;因為是響應式的我用jquery設置了一下高度(不用jquery,直接設置高度為100%好像不行,不知道為什麼有知 ...
  • DragEvent是一個表示drag和drop交互的DOM event介面。用戶通過將指針設備(如:滑鼠)放在目標的錶面開始拖動,然後拖動指針到一個新的位置(如其他DOM元素)。應用程式自動的解析拖放交互。DragEvent介面從mouseEvent和Event那兒繼承屬性。 Event types ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...