原生Js判斷元素是否隱藏

huaixiaoz 發(fā)布于2019-08-22 11:04 / 2150人閱讀

摘要：剛剛在看的源碼，所以此問(wèn)題延伸自中的一行代碼經(jīng)過(guò)自己實(shí)踐確實(shí)可以使用這種方法來(lái)判斷當(dāng)前元素是否被隱藏，包括通過(guò)設(shè)置父元素為以及自己本身為的情況。但是如果是通過(guò)設(shè)置則無(wú)法檢測(cè)出。

剛剛在看echo.js的源碼，所以此問(wèn)題延伸自echo.js中的一行代碼

var isHidden = function(element) {
    return (element.offsetParent === null);
};

經(jīng)過(guò)自己實(shí)踐確實(shí)可以使用這種方法來(lái)判斷當(dāng)前元素是否被隱藏，包括通過(guò)設(shè)置父元素為display:none以及自己本身為none的情況。但是如果是通過(guò)設(shè)置visibility:hidden則無(wú)法檢測(cè)出。

overflow關(guān)于這個(gè)問(wèn)題的討論

http://stackoverflow.com/ques...

除了上面的方法還有這種

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === "none")
}

這種方式也是需要手動(dòng)判斷visibility。不過(guò)貌似offsetParent的方法十分緩慢，即使是新的chrome也無(wú)法優(yōu)化。

GPU云服務(wù)器云服務(wù)器判斷是否隱藏原生js查找元素原生js獲取元素原生js添加元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91713.html

相關(guān)文章

原生js練習(xí)題---第五課

摘要：那該如何是好原題給出思路是讓事件負(fù)責(zé)標(biāo)記按鍵就好了，而方向鍵的事件處理使用設(shè)個(gè)周期比較小的定時(shí)器持續(xù)監(jiān)聽，由于周期小，長(zhǎng)按時(shí)就會(huì)立刻執(zhí)行相應(yīng)的事件處理，效果更加流暢。閃爍實(shí)現(xiàn)效果閃爍簡(jiǎn)單的一個(gè)定時(shí)器應(yīng)用，用或都可以實(shí)現(xiàn)。 0x1模擬select控件實(shí)現(xiàn)效果：5-01模擬select控件比較簡(jiǎn)單的點(diǎn)擊事件處理，也就處理點(diǎn)擊選擇框展示菜單、點(diǎn)擊菜單選擇、點(diǎn)擊頁(yè)面任意角落隱藏菜單這三件事...

winterdawn 2019-08-19 18:11 評(píng)論0 收藏0
前端常用代碼片段(五)

摘要：當(dāng)運(yùn)行時(shí)，如果不為，則將超時(shí)函數(shù)推送到事件隊(duì)列，并且函數(shù)退出，從而使調(diào)用堆棧清零。因此，該方法從頭到尾不經(jīng)過(guò)直接遞歸調(diào)用即可處理，因此調(diào)用堆棧保持清晰，無(wú)論迭代次數(shù)如何。前端常用代碼片段(一) 點(diǎn)這里前端常用代碼片段(二) 點(diǎn)這里前端常用代碼片段(三) 點(diǎn)這里前端常用代碼片段(四) 點(diǎn)這里 1.tap事件點(diǎn)透問(wèn)題？問(wèn)題點(diǎn)擊穿透問(wèn)題：點(diǎn)擊蒙層（mask）上的關(guān)閉按鈕，蒙層消失后發(fā)現(xiàn)觸...

MoAir 2019-08-23 14:41 評(píng)論0 收藏0
FastClick 源碼解讀

摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會(huì)直接掉，不會(huì)執(zhí)行下面的所有代碼。見源碼行，可以看出在響應(yīng)無(wú)操作后，則觸發(fā)。其實(shí)一直就想花些時(shí)間讀一讀那些優(yōu)秀的開源庫(kù)，今天終于下了決定打算死磕下自己，2016年每個(gè)月讀2-3個(gè)優(yōu)秀的開源庫(kù)，把源碼精彩的地方和自己心得分享給大家。目錄（一）背景（二）源碼解析（三）Zepto 點(diǎn)擊穿透與 Fast...

Chaz 2019-08-19 17:24 評(píng)論0 收藏0
總結(jié)移動(dòng)開發(fā)實(shí)踐中遇到的坑

摘要：博主之前已經(jīng)推薦了一款神器下面，就總結(jié)一下移動(dòng)端遇見的坑。解決原理虛擬鍵盤彈出時(shí)將元素設(shè)置為，虛擬鍵盤消失時(shí)候設(shè)置回來(lái)。解決方案由于虛擬鍵盤出現(xiàn)并未拋出事件，而檢測(cè)或者事件，皆會(huì)有一定延遲，會(huì)出現(xiàn)閃爍現(xiàn)象。做過(guò)很多移動(dòng)端的項(xiàng)目，在開發(fā)調(diào)試過(guò)程中，一款好的調(diào)試工具會(huì)讓效率大大提高。博主之前已經(jīng)推薦了一款神器：http://web.jobbole.com/87587/ 下面，就總結(jié)一下移...

rockswang 2019-08-29 11:16 評(píng)論0 收藏0
如何判斷元素是否在可視區(qū)域ViewPort

摘要：在這里一次性做個(gè)總結(jié)，以用來(lái)判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

jayzou 2019-08-23 13:43 評(píng)論0 收藏0