1. HTML5 自動顯示和隱藏文字，hidden屬性，為何以下方法不能實現
hidden屬性在html5中，只要存在，就是隱藏效果，而不論值為多少，要顯示元素，要刪除hidden屬性，而不是設置為false。實現代碼如下：
<script type=「text/javascript」 async=「true」>
function qq_onclick（）{
var text_2=document.getElementById（「text_1」）；
text_2、removeAttribute（「hidden」）；
}
function qq_close（）{
var text_1=document.getElementById（「text_1」）；
text_1、setAttribute（「hidden」，true）；
}
</script>
(1)web隱藏文字教程擴展閱讀：
HTML5的特性主要包括哪些內容
隨著移動互聯網的飛速發展，目前Html5技術也得到了不斷的完善，開發技術方面越來越成熟了，成為了目前主流的開發語言之一。html5的特性在五個方面體現的淋漓盡致
1、語義特性：
HTML5賦予網頁更好的意義和結構。
2、HTML5 APP Cache及本地存儲：
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度
3、設備兼容：
HTML5提供了前所未有的數據與應用接入開放介面。使外部應用可以與瀏覽器內部的數據直接相連。
4、連接特性：
更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的伺服器推送技術，能實現伺服器將數據「推送」到web app的功能。
5、圖形特性：
基於SVG、Canvas、WebGL及CSS3的3D功能，用戶能在瀏覽器中得以體驗到驚艷的視覺效果。
2. Web前端工程師應該知道的用CSS隱藏頁面元素的方法!
今天小編要跟大家分享的文章是關於Web前端工程師應該知道的用CSS隱藏頁面元素的方法!用CSS隱藏頁面元素有許多種方法。你可以將opacity設為0、將visibility設為hidden、將display設為none或者將position設為absolute
然後將位置設到不可見區域。
你有沒有想過，為什麼我們要有這么多技術來隱藏元素，而它們看起來都實現的是同樣的效果?每一種方法實際上與其他方法之間都有一些細微的不同，這些
不同決定了在一個特定的場合下使用哪一個方法。本篇文章就帶大家了解一下不同的方法分別用於那種場合更合適，下面就讓我們一起來看一看吧!
一、opacity
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框(boundingbox)而設計的。這意味著將opacity設為0
只能從視覺上隱藏元素。而元素本身依然占據它自己的位置並對網頁的布局起作用。它也將響應用戶交互。.hide{
opacity:0;}
如果你打算使用opacity
屬性在讀屏軟體中隱藏元素，很不幸，你並不能如願。元素和它所有的內容會被讀屏軟體閱讀，就像網頁上的其他元素那樣。換句話說，元素的行為就和它們不透明時一致。
我還要提醒一句，opacity屬性可以用來實現一些效果很棒的動畫。任何opacity屬性值小於1
的元素也會創建一個新的堆疊上下文(stackingcontext)。
看下面的例子：
看@SitePoint提供的例子「用opacity隱藏元素」
當你的滑鼠移到被隱藏的第2個的區塊上，元素狀態平滑地從完全透明過渡到完全不透明。區塊也將cursor屬性設置為了
pointer，這說明了用戶可以與它交互。
二、visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity
屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟體中也會被隱藏。
這個屬性也能夠實現動畫效果，只要它的初始和結束狀態不一樣。這確保了visibility
狀態切換之間的過渡動畫可以是時間平滑的(事實上可以用這一點來用hidden實現元素的延遲顯示和隱藏——譯者注)。.hide{
visibility:hidden;}
下面的例子演示了visibility與opacity有怎樣的不同：
看@SitePoint提供的例子「用visibility隱藏元素」
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為
visible即可(就如例子裡面的.o-hidep——譯者注)。嘗試只hover在隱藏元素上，不要hover在p
標簽里的數字上，你會發現你的滑鼠游標沒有變成手指頭的樣子。此時，你點擊滑鼠，你的click事件也不會被觸發。
而在
標簽則依然可以捕獲所有的滑鼠事件。一旦你的滑鼠移動到文字上，
本身變得可見並且事件注冊也隨之生效。
三、display
display屬性依照詞義真正隱藏元素。將display屬性設為none
確保元素不可見並且連盒模型也不生成。使用這個屬性，被隱藏的元素不佔據任何空間。不僅如此，一旦display設為none
任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它，就像操作其他的元素。.hide{
display:none;}
看下面的例子：
@SitePoint提供的例子「用display隱藏元素」
你將看到第二個塊元素內有一個
元素，它自己的display屬性被設置成block，但是它依然不可見。這是
visibility:hidden和display:none的另一個不同之處。在前一個例子里，將任何子孫元素visibility顯式設置成
visible可以讓它變得可見，但是display不吃這一套，不管自身的display值是什麼，只要祖先元素的display是
one，它們就都不可見。
現在，將滑鼠移到第一個塊元素上面幾次，然後點擊它。這個操作將讓第二個塊元素顯現出來，它其中的數字將是一個大於0
的數。這是因為，元素即使被這樣設置成對用戶隱藏，還是可以通過JavaScript來進行操作。
四、position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況(opacity和visibility影響布局，
display不影響布局但又無法直接交互——譯者注)。在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，有能讓元素保持可以操作。下面是採用這
種辦法的CSS：.hide{
position:absolute;
top:-9999px;
left:-9999px;}
下面的例子闡明了怎樣通過絕對定位的方式隱藏元素，並讓它和前面的那個例子效果一樣：
看@SitePoint提供的例子「用position屬性隱藏元素」
這種方法的主要原理是通過將元素的top和left
設置成足夠大的負數，使它在屏幕上不可見。採用這個技術的一個好處(或者潛在的缺點)是用它隱藏的元素的內容可以被讀屏軟體讀取。這完全可以理解，是因為你只是將元素移到可視區域外面讓用戶無法看到它。
你得避免使用這個方法去隱藏任何可以獲得焦點的元素，因為如果那麼做，當用戶讓那個元素獲得焦點時，會導致一個不可預料的焦點切換。這個方法在創建
自定義復選框和單選按鈕時經常被使用。(用DOM模擬復選框和單選按鈕，但用這個方法隱藏真正的checkbox和radio
元素來「接收」焦點切換——譯者注)
五、clip-path
隱藏元素的另一種方法是通過剪裁它們來實現。在以前，這可以通過clip屬性來實現，但是這個屬性被廢棄了，換成一個更好的屬性叫做
clip-path。NitishKumar最近在SitePoint發表了「介紹clicp-path
屬性」這篇文章，通過閱讀它可以了解這個屬性的更多高級用法。
記住，clip-path屬性還沒有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG
文件，瀏覽器支持度還要更低。使用clip-path屬性來隱藏元素的代碼看起來如下：.hide{
clip-path:polygon(0px0px,0px0px,0px0px,0px0px);}
下面是一個實際使用它的例子：
看@SitePoint提供的例子「用clip-path屬性隱藏元素」
如果你把滑鼠懸停在第一個元素上，它依然可以影響第二個元素，盡管第二個元素已經通過clip-path隱藏了。如果你點擊它，它會移除用來隱藏的
class，讓我們的元素從那個位置顯現出來。被隱藏元素中的文字仍然能夠通過讀屏軟體讀取，許多WordPress站點使用clip-path或者之前的
clip來實現專門為讀屏軟體提供的文字。
雖然我們的元素自身不再顯示，它也依然占據本該占據的矩形大小，它周圍的元素的行為就如同它可見時一樣。記住用戶交互例如滑鼠懸停或者點擊在剪裁區
域之外也不可能生效。在我們的例子里，剪裁區大小為零，這意味著用戶將不能與隱藏的元素直接交互。此外，這個屬性能夠使用各種過渡動畫來實現不同的效果。
結論
在這篇教程里，我們看了5種不同的通過CSS
隱藏元素的方法。每一種方法都與其他幾種有一點區別。知道你想要實現什麼有助於你決定採用哪一個屬性，隨著時間推移，你就能根據實際需求本能地選擇最佳方式了。
以上就是小編今天為大家分享的關於Web前端工程師應該知道的用CSS
隱藏頁面元素的方法!的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利哦~
*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。
3. java web開發：文字部分隱藏
可以用replace方法：
StringstrA="收款單平台已經確認";
StringstrB=strA.replace("平台","");//平台前後字數不限，都能搞定。
4. WebView載入頁面時隱藏頁面內的某一個標簽
通過getElementById()、getElementByTagName()、getElementByClassName()獲取標簽
1、通過修改display實現隱藏
[webView :@"document.getElementByClassName('xxx').style.display = 'none';"];
註： 這里有一個問題，就是這一句必須在webview完全載入完成之後插入，特別是有外邊的js設置display的時候，更需要注意插入的時機，如果只是單純在webViewDidFinishLoad里插入的話，可能實現不了想要的效果，因為webview執行到這里時，並不一定完全載入完成了，所以注時還會被沒有載入完成的js覆蓋，而且插入成功後，在webview重新載入之後，還會被覆蓋而達不到想要隱藏的效果。
2、通過css實現隱藏
[webView : @"var tagHead =document.documentElement.firstChild;" "var tagStyle = document.createElement(\"style\");" "tagStyle.setAttribute(\"type\", \"text/css\");" "tagStyle.appendChild(document.createTextNode(\"#header{height: 0pt; visibility:hidden;}\"));" "var tagHeadAdd = tagHead.appendChild(tagStyle);"];
註： 這里通過添加一個新的width、height的樣式，並將標簽內容隱藏以實現效果，但並沒有實現真正的隱藏，只是把寬、高設置為0，而標簽還在頁面上，好處就是不需要注意js的插入時機，只要在webViewDidFinishLoad調用就可以了，也不會出現被覆蓋的情況；
webview載入狀態：
a、uninitialized : 還沒開始載入
b、loading : 載入中
c、loaded : 載入完成
d、interactive : 結束渲染，用戶已經可以與網頁進行交互。但內嵌資源還在載入中
e、complete : 完全載入完成
WebViewDidFinishLoad 被調用時，readyState 可能處在 interactive 和 complete 兩種狀態。當我們需要對網頁中的元素進行修改時，最好在 complete 狀態進行，不然我們的修改可能被重置。 [wwjWebView:@"document.readyState"] 通過這句可以通過js獲取webview不同的載入狀態。
5. 如何隱藏電腦桌面圖標下的文字
如何隱藏電腦桌面圖標下的文字，步驟如下：
1、以現在最多人用的win7為例！
6. 如何隱藏WEB下的文件 讓別人任何辦法也看不見裡面有什麼
希望到時你能高速我一下 呵呵
7. 怎樣調節桌面web項目還有隱藏圖標文字的背影
右鍵我的電腦——屬性——高級——性能——設置——自定義，貌似有個在桌面圖標下顯示陰影，把前面的勾去掉，確定！
圖標顯示的陰影問題:
右擊「我的電腦」，依次單擊「屬性/高級/性能設置」在「視覺效果」頁中將「在桌面上為圖標標簽使用陰影」選中，單擊確定即可。
右鍵桌面空白處右擊，在「排列圖標」里去掉「鎖定桌面的web項目」
桌面右鍵→屬性→桌面→自定義桌面→Web→鎖定桌面項目
前的那個鉤 去掉就好了
電腦右鍵 屬性 高級 第一個設置（性能設置）讓Windows選擇計算機的最佳效果
電腦右鍵 屬性 高級 第一個設置（性能設置）讓Windows選擇計算機的最佳效果
這是我在很多辦法都不行的時候 自己實驗成功的！
你自己試試上邊的方法。
8. 如何隱藏html中的文字和鏈接
做成圖片。或者用iframe試試
JS搜索引擎也是可以識別的，GOOGLE就可以，網路應該也會可以的
<html>
<head>
<script>
function clear() {
Source=document.body.firstChild.data;
document.open();
document.close();
document.body.innerHTML=Source;
}
</script>
</head>
<body onload=clear()>
Test
</body>
</html>
------------------
隱藏網頁源代碼方法匯總
1、將以下代碼加入到HEML的<body></body>之間
<SCRIPT language=javascript>
function click() {if (event.button==2) {alert('不許你偷看！');}}document.onmousedown=click
</SCRIPT>
.................................................................
2、禁止查看網頁源代碼
真正能實現源代碼屏蔽的單純的.htm是不可能的！想看源代碼是沒辦法阻止的。用TELEPROT可以下載任何文件，相當於做鏡像網站， 除非伺服器進行安全設置、加密。 下面給幾種參考方法，使在瀏覽我的個人主頁時不能使用右鍵或者不能看到源程序或源代碼等。
1）在主頁上輸入代碼：
<SCRIPT language=javascript>
function click() {
if (event.button==2) {
alert(\'對不起,禁止使用此功能^_^.\')
}
}
document.onmousedown=click
</SCRIPT>
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=500 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
// -->
</script>
2）網頁安全技術指南
隨著Internet的飛速發展,網站的數量正呈幾何級速度遞增,網頁上的信息極大豐富,但網站的安全與信息的版權卻不斷受到威脅.近來,全球各大網站先後遭到黑客攻擊,接著,為了順應新形勢,國內首家有關網路安全專題誕生了.網站與網頁的安全性受到越來越多的關注,本文將由淺入深地介紹關於加強網頁安全性的各種技術和技巧,對關心網頁源代碼版權和網頁數據安全保護的讀者有較大的幫助.
初級入門篇
對廣大網頁編寫者來說,對源代碼的保護是最為關注的,但往往卻沒有任何辦法.辛辛苦苦編寫的網頁在瀏覽者面前毫無遮掩,只要被別人輕輕點擊滑鼠右鍵,選擇(查看源代碼)一項後,即可獲得網頁完全代碼,甚至稍加修改後就成為他人的網頁.本篇將通過採用JavaScript技術,對頁面源代碼的修改,使瀏覽者無法獲得源碼,達到保護代碼的目的.
首先,應屏蔽Internet Explorer工具欄中-查看-源代碼一項的功能,即將頁面採用框架結構的方式.若你的頁面並未使用框架結構,且不需使用框架結構,可使用"零框架"技術(即將頁面分為左右兩幀,左幀的寬度為1,右幀為原頁面).該方法的代碼如下:
<html>
<head>
<title>歡迎光臨網頁教學網</TITLE>
</HEAD>
<FRAMESET COLS="1,*" frameborder=0 framespacing=0>
<FRAME SRC="PS.HTM" NAME="count" noresize scrolling=no>
<FRAME SRC="search.HTM" NAME="search" noresize>
</frameset>
</html>
將該文件存為主文件index.htm,建立一空文件ps.htm,原頁面文件現另存為index.html(與主文件名僅在擴展名上略有不同).採用零框架技術有以下優點:
1.瀏覽者在用工具欄中的源代碼項無法直接得到頁面代碼,僅能得到框架主文件的代碼(即上述代碼).
2.可利用左幀文件ps.htm載入一些網頁的高級應用,如背景音樂,網頁計數器,cookie應用等.
其次,應屏蔽滑鼠右鍵的顯示源文件功能,即在所需保護的頁面文件(上例中為index.html文件)中加入以下代碼:(當右鍵被點擊時將出現圖1所示提示框)
<script Language="JavaScript">
function click() {
if (event.button==2||event.button==3) {alert(\'"用右鍵要幹嘛？"^_^\') }}
//引號中提示可自定義
document.onmousedown=click
</script>
最後,為防止一些了解網頁編寫語言的人通過框架主文件中的連接手工找出被保護頁面後獲得源代碼,還應在被保護頁面中加入以下代碼:
<script language="javascript">
if(top==self)top.location="index.html"
</script>
這段代碼將提供跳回功能,使瀏覽器無法直接看到該頁,而是自動跳回框架主文件index.html,起到保護該頁面的作用.
在完成以上三個步驟,對你的主頁按照框架結構進行了修改後,你的主頁源代碼將不能被瀏覽者在網上獲得,可以小小慶賀一下了
另外,若你確實不想用框架頁面,那麼可用特殊的方法打開瀏覽器新窗口,再結合屏蔽滑鼠的功能代碼後亦可收到同樣的效果,打開方法如下:
<a href=javascript:window.open("key.html","被保護頁面的標題","height=170,width=290,left=0,top=0,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,history=0") target=_blank>打開被保護頁面的連接</a>
代碼中,key.html為被保護頁面的文件名.新窗口的高度height與寬度width的值可由用戶自定義,單位為像素.
注意:嵌入式的 JavaScript代碼應加在原文件的<head></head>元素區內.
中級深入篇
上篇中是採用JavaScript技術達到保護在線網頁的目的.正所謂"強中自有強中手",有些人使用Webzip,TelePro,Offline等離線瀏覽器下載你的主頁,就可繞過JavaScript保護在線網頁的防線,將網頁下載後再慢慢剖析.有矛必有盾,你亦可用JavaScript建立的動態轉向文件是大多數離線瀏覽器無法下載你的網頁,方法如下.你可將上例中的被保護頁面更名為index1.html,而將文件index.html改為以下代碼:
<script>
window.location.replace(\'index1.html\') //本句產生網頁跳轉功能
</script>
對Internet Explorer5新增的離線瀏覽功能(離線工作),以上方法有時失靈,可通過對網頁設置cookie的高級技術達到保護的目的.一旦cookie超期,即使網頁已被下載到本機也無法瀏覽,呵呵,厲害吧:)
應加入文件中的cookie代碼段如下:
<script language="JavaScript">
function getCookieVal (offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (2 < argc) ? argv[2] : true;
var path = (3 < argc) ? argv[3] : true;
var domain = (4 < argc) ? argv[4] : true;
var secure = (5 < argc) ? argv[5] : true; //安全模式生效
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function ResetCounts(name)
{
visits = 0;
SetCookie(expdate , "/", true, true);
location.reload();
}
</script>
<script language="JavaScript">
var expdate = new Date();
var visits;
expdate.setTime(expdate.getTime() + (24*60*60 * 1000)); //COOKIES超期時間設置,此處為1天
if(!(visits = GetCookie("visits")))
visits = 0;
visits++;
SetCookie(expdate, "/", true, true);
</script>
如果你已經做到這一步了,那麼你的網頁所受到的保護就不再是常規意義上的出於道德觀念或版權意識,而是真正的技術上的保護手段.
高級研究篇
對網頁的保護並不僅僅是涉及源代碼的保護,更應該包含對網頁數據或網路資料庫的保護.對網路資料庫的保護可採用基於IIS的CGI介面的認證程序,SQL的安全技術,ASP安全認證程序,Java Applet安全認證程序等手段,屬於更高層次的安全措施,包含大量內容,本文不作介紹.本篇將介紹應用JavaScript技術構造的頁面認證介面.將僅供有限人群訪問的需要數據保護的頁面中加入以下代碼:
<script LANGUAGE="JAVASCRIPT">
<!--
loopy()
function loopy() {
var sWord =""
while (sWord != "hibow") {
sWord = prompt("輸入正確密碼登陸! ")
}
alert("身份識別......允許登陸")
}
//-->
</script>
注意:嵌入式的 JavaScript代碼應加在原文件的<head></head>元素區內.
代碼中欄位sWord的值hibow為登陸被保護頁面的密碼.你可將自定義的密碼告訴允許訪問該頁面的用戶,僅當密碼被正確輸入後瀏覽者才可看見頁面內容,否則將循環停留在密碼登入框中(見圖2),進不去嘍
為了達到保護頁面源代碼及數據的最佳效果,可將本文介紹的所有方法相結合,這就要考驗大家的悟性和能力了。
這樣是鎖不住代碼的，只要先點左健不放，再點右健，在放左建，就能看了，如果你的主頁是用ASP，PHP，或者CGI購建的，一般對方是看不到源代碼的。防右鍵的方法已經過時了 還有一個辦法就是把回車全去掉，把整個文件壓縮。這樣看到也看不清楚， 還不影響動行
9. Web前端工程師應該知道的CSS隱藏頁面元素的方法
今天小編要跟大家分享的文章是關於Web前端工程師應該知道的CSS隱藏頁面元素的方法。用CSS隱藏頁面元素有許多種方法。你可以將opacity設為0、將visibility設為hidden、將display設為none或者將position設為absolute
然後將位置設到不可見區域。
你有沒有想過，為什麼我們要有這么多技術來隱藏元素，而它們看起來都實現的是同樣的效果?每一種方法實際上與其他方法之間都有一些細微的不同，這些
不同決定了在一個特定的場合下使用哪一個方法。這篇教程將覆蓋到那些你需要記住的細小不同點，讓你根據不同情況選擇上面這些方法中適合的方法來隱藏元素。正在從事web前端工作的小夥伴們來和小編一起學習一下吧！
一、opacity
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框(boundingbox)而設計的。這意味著將opacity設為0
只能從視覺上隱藏元素。而元素本身依然占據它自己的位置並對網頁的布局起作用。它也將響應用戶交互。
.hide{
opacity:0;}
如果你打算使用opacity
屬性在讀屏軟體中隱藏元素，很不幸，你並不能如願。元素和它所有的內容會被讀屏軟體閱讀，就像網頁上的其他元素那樣。換句話說，元素的行為就和它們不透明時一致。
我還要提醒一句，opacity屬性可以用來實現一些效果很棒的動畫。任何opacity屬性值小於1
的元素也會創建一個新的堆疊上下文(stackingcontext)。
看下面的例子：
看@SitePoint提供的例子「用opacity隱藏元素」
當你的滑鼠移到被隱藏的第2個的區塊上，元素狀態平滑地從完全透明過渡到完全不透明。區塊也將cursor屬性設置為了
pointer，這說明了用戶可以與它交互。
二、visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity
屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟體中也會被隱藏。
這個屬性也能夠實現動畫效果，只要它的初始和結束狀態不一樣。這確保了visibility
狀態切換之間的過渡動畫可以是時間平滑的(事實上可以用這一點來用hidden實現元素的延遲顯示和隱藏——譯者注)。
.hide{
visibility:hidden;}
下面的例子演示了visibility與opacity有怎樣的不同：
看@SitePoint提供的例子「用visibility隱藏元素」
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為
visible即可(就如例子裡面的.o-hidep——譯者注)。嘗試只hover在隱藏元素上，不要hover在p
標簽里的數字上，你會發現你的滑鼠游標沒有變成手指頭的樣子。此時，你點擊滑鼠，你的click事件也不會被觸發。
而在
標簽則依然可以捕獲所有的滑鼠事件。一旦你的滑鼠移動到文字上，
本身變得可見並且事件注冊也隨之生效。
三、display
display屬性依照詞義真正隱藏元素。將display屬性設為none
確保元素不可見並且連盒模型也不生成。使用這個屬性，被隱藏的元素不佔據任何空間。不僅如此，一旦display設為none
任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它，就像操作其他的元素。
.hide{
display:none;}
看下面的例子：
@SitePoint提供的例子「用display隱藏元素」
你將看到第二個塊元素內有一個
元素，它自己的display屬性被設置成block，但是它依然不可見。這是
visibility:hidden和display:none的另一個不同之處。在前一個例子里，將任何子孫元素visibility顯式設置成
visible可以讓它變得可見，但是display不吃這一套，不管自身的display值是什麼，只要祖先元素的display是
one，它們就都不可見。
現在，將滑鼠移到第一個塊元素上面幾次，然後點擊它。這個操作將讓第二個塊元素顯現出來，它其中的數字將是一個大於0
的數。這是因為，元素即使被這樣設置成對用戶隱藏，還是可以通過JavaScript來進行操作。
四、position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況(opacity和visibility影響布局，
display不影響布局但又無法直接交互——譯者注)。在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，有能讓元素保持可以操作。下面是採用這
種辦法的CSS：
.hide{
position:absolute;
top:-9999px;
left:-9999px;}
下面的例子闡明了怎樣通過絕對定位的方式隱藏元素，並讓它和前面的那個例子效果一樣：
看@SitePoint提供的例子「用position屬性隱藏元素」
這種方法的主要原理是通過將元素的top和left
設置成足夠大的負數，使它在屏幕上不可見。採用這個技術的一個好處(或者潛在的缺點)是用它隱藏的元素的內容可以被讀屏軟體讀取。這完全可以理解，是因為你只是將元素移到可視區域外面讓用戶無法看到它。
你得避免使用這個方法去隱藏任何可以獲得焦點的元素，因為如果那麼做，當用戶讓那個元素獲得焦點時，會導致一個不可預料的焦點切換。這個方法在創建
自定義復選框和單選按鈕時經常被使用。(用DOM模擬復選框和單選按鈕，但用這個方法隱藏真正的checkbox和radio
元素來「接收」焦點切換——譯者注)
五、clip-path
隱藏元素的另一種方法是通過剪裁它們來實現。在以前，這可以通過clip屬性來實現，但是這個屬性被廢棄了，換成一個更好的屬性叫做
clip-path。NitishKumar最近在SitePoint發表了「介紹clicp-path
屬性」這篇文章，通過閱讀它可以了解這個屬性的更多高級用法。
記住，clip-path屬性還沒有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG
文件，瀏覽器支持度還要更低。使用clip-path屬性來隱藏元素的代碼看起來如下：
.hide{
clip-path:polygon(0px0px,0px0px,0px0px,0px0px);}
下面是一個實際使用它的例子：
看@SitePoint提供的例子「用clip-path屬性隱藏元素」
如果你把滑鼠懸停在第一個元素上，它依然可以影響第二個元素，盡管第二個元素已經通過clip-path隱藏了。如果你點擊它，它會移除用來隱藏的
class，讓我們的元素從那個位置顯現出來。被隱藏元素中的文字仍然能夠通過讀屏軟體讀取，許多WordPress站點使用clip-path或者之前的
clip來實現專門為讀屏軟體提供的文字。
雖然我們的元素自身不再顯示，它也依然占據本該占據的矩形大小，它周圍的元素的行為就如同它可見時一樣。記住用戶交互例如滑鼠懸停或者點擊在剪裁區
域之外也不可能生效。在我們的例子里，剪裁區大小為零，這意味著用戶將不能與隱藏的元素直接交互。此外，這個屬性能夠使用各種過渡動畫來實現不同的效果。
結論
在這篇教程里，我們看了5種不同的通過CSS
隱藏元素的方法。每一種方法都與其他幾種有一點區別。知道你想要實現什麼有助於你決定採用哪一個屬性，隨著時間推移，你就能根據實際需求本能地選擇最佳方式了。
以上就是小編今天為大家分享的關於Web前端工程師應該知道的CSS
隱藏頁面元素的方法的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
10. 訪問web的時候電腦信息怎麼隱藏
用360瀏覽器，裡面有一個超級安全模式，可以虛擬一個內核，也就是假的計算機。留下的信息，不是真是的，也沒有任何痕跡，很好用，好用的話給我加分哦，祝你好運！