首頁 web前端 js教程 js設定控制項的隱藏與顯示的兩種方法_javascript技巧

js設定控制項的隱藏與顯示的兩種方法_javascript技巧

May 16, 2016 pm 04:38 PM
控制項 顯示 隱藏

用JavaScript隱藏控制項的方法有兩種,分別是透過設定控制項的style的「display」和「visibility」屬性。

當style.display="block"或style.visibility="visible"時控製或見,當style.display="none"或style.visibility="hidden"時控制不可見。不同的是「display」不僅隱藏控件,而且被隱藏的控件不再佔用顯示時佔用的位置,而「visibility」隱藏的控件僅僅是將控件設置成不可見了,控件仍然佔俱原來的位置。

function displayHideUI()
{
var ui =document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui =document.getElementById("bbs");
ui.style.display="";//display为空的话会好使,为block会使后边的空间换行
}
function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>
登入後複製

值 描述
none 此元素不會被顯示。
block 此元素將顯示為區塊級元素,此元素前後會帶有換行符號。
inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符號。
inline-block 行內塊元素。 (CSS2.1新增的值)
list-item 此元素會顯示為清單。
run-in 此元素會根據上下文以區塊級元素或內嵌元素顯示。
compact CSS 中有值compact,不過由於缺乏廣泛支持,已從CSS2.1 中刪除。
marker CSS 中有值marker,不過由於缺乏廣泛支持,已從CSS2.1 中刪除。
table 此元素會以區塊級表格顯示(類似

),表格前後都有換行符號。
inline-table 此元素會作為內嵌表格來顯示(類似
),表格前後沒有換行符號。
table-row-group 此元素會以一個或多個行的分組來顯示(類似)。
table-header-group 此元素會以一個或多個行的分組來顯示(類似)。
table-footer-group 此元素會以一個或多個行的分組來顯示(類似)。
table-row 此元素會顯示為一個表格行(類似)。
table-column-group 此元素會以一個或多個列的分組來顯示(類似)。
table-column 此元素會以一個單元格列顯示(類似)
table-cell 此元素會以表格儲存格顯示(類似

table-caption 此元素會以表格標題顯示(類似

inherit 規定應該從父元素繼承display屬性的值。

今天解決的問題是在jsp頁面中給css定義的label.error的類別一個id,然後透過控制id的可見性來實現收起div時清除js的提示訊息。具體如下:
在準備介面的函數中var label1 = document.getElementById("label1");

$(document).ready(function() {
$(".flipp .span4").click(function() {
$(this).parent().next().toggle();
$(this).parent().parent().prevAll().find(".panel").hide();
$(this).parent().parent().nextAll().find(".panel").hide();
var label1 = document.getElementById("label1");
label1.style.display="none";
})
登入後複製

然後在jsp對應的地方加入:

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>
登入後複製

對於css定義的label.error類,可以使用$("label.error").removeAttr("style").attr("style", "display: none;");來實現如上的功能。而且,貌似也不用在地下對應的位置為label定義id值。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11輸入法懸浮窗隱藏設置 Win11輸入法懸浮窗隱藏設置 Dec 30, 2023 pm 11:24 PM

有些小夥伴對於win11的輸入法懸浮窗功能非常不習慣,使用起來總是怪怪的,因此想要關閉這個懸浮窗功能,現在就給大家介紹一下win11系統下關閉懸浮窗的正確操作方法,一起跟著操作吧。 win11隱藏輸入法懸浮窗1、打開電腦的設定鍵,然後選擇“時間和語言“,進入之後再點擊”輸入“2、在“高級鍵盤設定”裡找到“切換輸入法”,然後把“桌面語言欄」前的勾點上,再進入「語言欄選項」3、開啟後,我們點選這裡的「隱藏「就可以把語言懸浮窗關掉了。

如何隱藏Windows 11工作列圖示? 如何隱藏Windows 11工作列圖示? Jan 06, 2024 am 08:38 AM

在win11系統中,如果我們覺得工作列中的圖示麻煩,可以選擇將它隱藏到任務欄角溢出介面中,不過下方開啟的應用工作列中的圖示是不可以隱藏的,下面就跟著小編來看一下具體的情況吧。 win11工作列圖標怎麼隱藏:一、居中圖標1、首先,如果我們要隱藏下方任務欄中的圖標,可以右鍵選中,點擊“從任務欄取消固定”2、但是如果我們打開了這個應用,並且正在使用它,那就是無法隱藏的。二、右下角圖標1、如果要隱藏右下角的應用程式圖標,先開啟系統設定。 2、然後點選左側邊欄的“個人化”,如圖所示。 3.接著點擊進入右側的工作列

不封鎖不刪除怎麼隱藏微信好友?不封鎖不刪除隱藏微信好友的方法 不封鎖不刪除怎麼隱藏微信好友?不封鎖不刪除隱藏微信好友的方法 Mar 13, 2024 pm 07:19 PM

  不黑不刪除怎麼隱藏微信好友?不少的用戶們想隱藏一些好友不知道要怎麼去操作,下面就讓本站來為用戶們來仔細的介紹一下不拉黑不刪除隱藏微信好友的方法吧。  不拉黑不刪除隱藏微信好友的方法  方法一:  1、先開啟微信軟體,在微信頁面找到通訊錄,點選」我的「。  2、然後我們進入到設定頁面。  3、找到」隱私「選項,點選進去。  4、接著點擊」不讓他看「。  5、進入到不讓她看頁面,點選」+「勾選需要隱藏的好友

抖音短影片怎麼隱藏作品 隱藏個人影片作品的方法 抖音短影片怎麼隱藏作品 隱藏個人影片作品的方法 Mar 12, 2024 pm 12:49 PM

抖音短視頻app軟體內提供的短視頻作品非常多,隨心所欲想看就看,而且都是永久免費提供的,不同類型的視頻直播頻道都是開放的,所有的視頻內容都是原創的,帶給大家最滿意的觀看方式。輸入帳號線上登錄,各種精彩萬分的短視訊推送,都是根據大家日常看的,精準推薦,還能進入直播間與主播互動聊天,讓你的心情更加愉悅。個人上傳的作品也能隱藏起來,非常簡單一鍵設置,刷到哪裡看到哪,上下滑動無數網友的實時評論搶先看,還能分享日常的生活動態,現在小編在線詳細為抖音短視頻用戶推送隱藏個人影片作品的方法。首先打開抖音短

小米14如何隱藏靈動島? 小米14如何隱藏靈動島? Mar 18, 2024 pm 03:40 PM

除了令人驚嘆的硬體配置和出色的功能,小米14還隱藏著一個讓人著迷的地方—靈動島。在這裡,用戶可以盡情享受個人化客製化以及創意無限的手機體驗。不過不是所有人都喜歡這個功能的,那麼,小米14如何隱藏靈動島呢?讓我們一起了解一下。小米14如何隱藏靈動島? 1.開啟小米14手機的設定應用程式。 2.捲動找到「特色功能」選項並點選進入。 3.在特色功能頁面中找到「隱藏靈動島」選項並開啟它。 4.確認開啟隱藏靈動島後,返回桌面即可看到靈動島已被隱藏。

抖音隱藏作品的詳細教學 抖音隱藏作品的詳細教學 Mar 25, 2024 pm 03:11 PM

1.先點選【+】進行拍攝。 2、然後點選右下角的勾確認完成拍攝。點選】下一步【,3、點選【誰可以看】。選擇【私密】即可,情境二:已拍作品,1、點選【我】,選擇【作品】。 2.點選右旁【三點】標識。 3.向左滑動,找到【權限設定】,4、點擊】設為私密】即可。

桌面佈局已鎖定的原因及解決方法 桌面佈局已鎖定的原因及解決方法 Feb 19, 2024 pm 06:08 PM

顯示桌面佈局已鎖定是怎麼回事在使用電腦的過程中,有時我們可能會遇到顯示桌面佈局已鎖定的情況。這個問題意味著我們無法自由地調整桌面圖示的位置或改變桌面背景等操作。那麼,顯示桌面佈局已鎖定到底是怎麼回事?一、理解桌面佈局和鎖定功能首先,我們需要了解桌面佈局和桌面鎖定這兩個概念。桌面佈局是指桌面上各元素的排列方式,包括捷徑、資料夾和小工具等。我們可以自由

steam隱藏遊戲在哪 steam隱藏遊戲在哪 Feb 24, 2024 am 11:37 AM

steam中可以隱藏一些不想被看到的遊戲,那麼隱藏遊戲在哪呢?玩家們能夠在查看裡點擊隱藏的遊戲,就能夠在裡面發現自己隱藏的遊戲內容,這篇steam隱藏遊戲位置介紹就能夠告訴大家具體的方法,下面就是詳細的介紹,趕緊來看看吧! 《steam使用教學》steam隱藏遊戲在哪答:在查看裡點擊隱藏的遊戲具體方法:1、先點擊軟體裡的查看,點擊隱藏的遊戲。 2.點擊之後,在左邊的選單裡就能夠看到隱藏的遊戲。怎麼隱藏遊戲:1、先點擊自己的遊戲庫。 2、選擇一個遊戲,右鍵選擇管理。 3、選擇隱藏此遊戲。

See all articles