css display:none使用注意事項小結(jié)
更新時間：2008年09月10日 23:43:32 作者：
web頁面前臺編碼時經(jīng)常用到display:none樣式，平常使用時發(fā)現(xiàn)有幾點特征需要注意
1、如果在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面后，在沒有通過js設(shè)置樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設(shè)置style.display來使元素顯示后才能正確獲得這些值。
2、使用display:none隱藏的元素不會被百度等搜索網(wǎng)站檢索，會影響到網(wǎng)站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。
3、如果是通過樣式文件或<style>css</style>方式來設(shè)置元素的display:none樣式，用js設(shè)置style.display=""并不能使元素顯示，可以使用block或inline等值來代替。通過style="display:none"直接在元素上進行的設(shè)置不會有這個問題
4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所占的空間，而style.display隱藏元素且讓出所占頁面空間。
2、使用display:none隱藏的元素不會被百度等搜索網(wǎng)站檢索，會影響到網(wǎng)站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。
3、如果是通過樣式文件或<style>css</style>方式來設(shè)置元素的display:none樣式，用js設(shè)置style.display=""并不能使元素顯示，可以使用block或inline等值來代替。通過style="display:none"直接在元素上進行的設(shè)置不會有這個問題
4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所占的空間，而style.display隱藏元素且讓出所占頁面空間。
相關(guān)文章
HTTP與HTTPS超文本傳輸協(xié)議的區(qū)別是什么
隨著越來越多的網(wǎng)站使用HTTPS加密，現(xiàn)在HTTPS的使用已經(jīng)成了硬性要求了。雖然說https是http的安全版，但兩者還是有不少區(qū)別的。本文從https、http的概念和原理入手，講解他們的不同，讓讀者朋友能夠真正理解。2022-12-12
轉(zhuǎn)自國外網(wǎng)站，本想翻譯成中文，但是細看文章實在是簡單，如果看不懂這個，我想也就沒必要繼續(xù)做前端了。2008-02-02
關(guān)于超鏈接的下劃線 使用說明...2007-08-08
CSS樣式表的背景渲染效率...2006-12-12
有時候圖片太大，會破環(huán)網(wǎng)頁整齊的布局。這時可以用css來強制按比例壓縮圖片的高度或?qū)挾取?/div> 2008-06-06
很多CSSer是從以前的網(wǎng)頁制作中開始學(xué)習(xí)CSS網(wǎng)頁布局的，或許還存在著一定的DW習(xí)慣。希望此文能幫助大家理解和糾正一些不好的習(xí)慣。2008-11-11
一般要固定某個div,我們都會讓該div{position:fixed},它的下一個div{position:absolute}看了幾個國外的關(guān)于CSS的固定定位跨瀏覽解決方案.他們卻反其道而為之2008-11-11
CSS的margin邊界疊加深度剖析圖文演示...2007-09-09
用<TABLE>語句來實現(xiàn)圓角表格可以省去制作圓角圖片之苦！
用<TABLE>語句來實現(xiàn)圓角表格可以省去制作圓角圖片之苦！...2007-04-04
超贊的隨機顏色搭配工具...2007-05-05最新評論