iT邦幫忙

1

DIV的隱藏屬性?

css
  • 分享至 

  • xImage

上網看了看DIV的隱藏類型,有下面兩種
一:div style="display:none">區塊中的內容 /div
二:div style="visibility:hidden">區塊中的內容 /div

想請問的是:

  1. 什麼情況會要把DIV內容隱藏呢?
  2. 又假設將文字放入DIV內隱藏,這樣對於網頁關鍵字是否有幫助呢?

參考來源:https://www.wibibi.com/info.php?tid=166

謝謝

froce iT邦大師 1 級 ‧ 2019-05-24 14:27:17 檢舉
display:none -> 畫面上不會有元素在,不會有長度寬度。
visibility:hidden -> 元素仍在,有長度寬度,但是不顯示,會佔空白。
ccutmis iT邦高手 2 級 ‧ 2019-05-24 14:35:05 檢舉
try this:
<div style="display:none;">display:none; 完全不會出現在畫面中 也不會佔用畫面任何空間</div>
<div style="opacity:0.2">=========== 我是分隔線1 ===========</div>
<div style="visibility:hidden;">visibility:hidden; 內容不會出現在畫面中 但會佔用畫面空間</div>
<div style="opacity:0.6">=========== 我是分隔線2 ===========</div>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

4
dragonH
iT邦超人 5 級 ‧ 2019-05-24 15:13:43
最佳解答

簡單來說

display:none => 不會占位置

visibility:hidden =>會占位置

1 . 什麼情況會要把DIV內容隱藏呢?

不久前蘋果新聞開始推註冊才能看新聞

https://ithelp.ithome.com.tw/upload/images/20190524/20117259Br6Wy9pdJP.png

可能是剛開始推吧

只用 display:none 把新聞本體跟圖片隱藏 (或者是應付老闆XD

所以只要打開F12

輸入

    $('.ndArticle_margin').show();
    $('.ndAritcle_headPic').show();

或者直接block js

就可以免登入看新聞

不過現在他們好像直接用jquery remove了

但看原始碼還是看的到就是

https://ithelp.ithome.com.tw/upload/images/20190524/20117259oG0YiMJS0m.png

2 .又假設將文字放入DIV內隱藏,這樣對於網頁關鍵字是否有幫助呢?

比起有沒有幫助, 大多數人應該比較care的是會不會影響SEO

我記得google的搜尋引擎是用爬蟲來爬的

不論用了哪個

從你的code都還是看的到

目前查到的資料來看

應該是會影響

google對用了隱藏的文字跟直接明文顯示

可能會有不同的比重

舉個極端的例子

如果把幾10M的文檔

放到頁面隱藏起來

只秀一行短短的Hello world

user花了很長的時間讀取頁面

最後只看到一行字

那麼重視 user experience 的 google

應該不會放任不管

當然以上是推測

畢竟大部分人沒看過google的source code

參考1

參考2

參考3

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2019-05-24 15:19:07 檢舉

不過現在他們好像直接用jquery remove了,但看原始碼還是看的到就是

...蘋果日報應該把叫前端做隱藏的白癡主管先移除掉。
怎麼會想在前端下文章。Orz
放在原始碼更好爬。

dragonH iT邦超人 5 級 ‧ 2019-05-24 15:26:55 檢舉

可能他們有自信可以應付爬蟲吧XD

不過根據我去爬的結果

顯然是沒什麼用/images/emoticon/emoticon01.gif

或許以後真正強制註冊後

會用更好的方式吧

應該吧? XD

froce iT邦大師 1 級 ‧ 2019-05-24 15:37:02 檢舉

前端不管做啥努力都沒用啦。
後端還可以想點辦法。

student iT邦新手 2 級 ‧ 2019-05-27 08:38:26 檢舉

感謝您

我要發表回答

立即登入回答