“去掉那個框框”外掛--第二版
第二版程式碼如下----還沒實現好點的功能,不過先做出來吧
window.onload=function(){
// 選擇器封裝
function $(name) {
let result = document.querySelectorAll(name).length > 1 ? [...document.querySelectorAll(name)] : document.querySelector(
name);
return result;
}
// 對lists陣列元素進行判斷,如果當前網頁存在對應的元素,則將其新增入boxs陣列中
function divAdd(list) {
for (let item of list) {
if (item) {
boxs.push(item);
}
}
}
// 隱藏功能程式碼(實際上就只是給div加上個display:none)
function hidden(item) {
// 對傳入的引數進行長度判斷是因為有可能這個引數是個陣列,如果是陣列的話就對其進行遍歷操作
if(item.length>1){
for(let i of item){
i.style.display="none";
}
}else{
item.style.display="none";
}
}
// boxs為儲存當前網頁中能隱藏的div的集合
let boxs = [];
let lists = [$("#HMRichBox"), $("#downdiv"),$(".layui-row")];
divAdd(lists);
boxs.map(item=>hidden(item));
}
程式碼解析:
首先是那個boxs的空陣列,之所以宣告這麼一個陣列是為了存放當前網頁中存在的需要去除的框框,假如沒有這麼一個陣列來存在,直接將最下面所有需要去除的內容陣列進行去除,會有一部分因為該網頁並不存在對應的資料導致報錯。
在封裝的選擇器返回選中的物件時,有一個問題,就是控制檯報錯了,一直顯示找不到style屬性啥的,像Cannot set property 'display' of undefined
因為document.querySelectorAll(name)所返回的是一個NodeList物件,這個物件挺麻煩的,不能使用array還有object這些的屬性方法,導致我的程式碼一直報錯。既然它跟陣列看起來挺像的,那我就直接把它轉化為陣列好了,直接對選擇器的返回值使用擴充套件運算子加[]轉換為陣列(老子真聰明)。
剩下的就沒啥了
全部思路:
首先,先把所有網站中看不順眼的div的id或者class名傳入封裝好的$()函式中,將得到的值寫入lists中,
再呼叫divAdd()函式,將lists作為引數傳入之後,對該引數進行遍歷判斷(因為lists是一個陣列,所以可以遍歷),判斷其子元素中是否在當前頁面存在,如果存在則將該元素新增入boxs陣列中。
最後一步就是對boxs陣列的所有子元素進行遍歷操作了,我使用的是map()方法,對boxs的每個子元素都呼叫一次hidden()方法,完事
相關文章
- LuaView SDK第二版設計外掛化理解(二)View
- [外掛擴充套件]留言版外掛套件
- 我做了一個 VSCode 外掛版的 ChatGPTVSCodeChatGPT
- 3個框框帶你理解EventLoopOOP
- zotero新增markdown外掛(Mac版)Mac
- Flutter版聚合廣告外掛Flutter
- Chrome外掛英雄榜(第二期)Chrome
- Activity外掛化原理第二種方案:Hook IActivityManagerHook
- window版postgresql安裝orafce外掛SQL
- Jib使用小結(Maven外掛版)Maven
- Lumenzia for mac(ps亮度蒙版外掛)Mac
- mac版Photoshop外掛安裝教程Mac
- gitbook 入門教程之實用外掛(新增3個外掛)Git
- FCPX外掛:超級慢動作變速外掛Twixtor Pro 7 mac版Mac
- 自己寫一個Babel外掛Babel
- Flutter個人外掛使用整理Flutter
- 聊天富文字外掛,一個基於react的富文字外掛React
- 自己動手編寫一個Mybatis外掛:Mybatis脫敏外掛MyBatis
- 還記得那個提速8倍的IDEA外掛嗎?VS Code版本也釋出啦!!Idea
- AE Saber外掛 for Mac 1.0.39 漢化版Mac
- Docker與Jib(maven外掛版)實戰DockerMaven
- 10個 解放雙手的 IDEA 外掛,這些程式碼都不用寫(第二彈)Idea
- 如何從零編寫一個vite外掛 建立 vite 外掛通用模板Vite
- 如何寫一個Vue的外掛Vue
- 第二屆熵密杯-廣外女生青春版熵
- [需求建議]加強版評論外掛
- RainFX for Photoshop(PS降雨效果外掛) 中文版AI
- 從頭開發一個Flutter外掛(二)高德地圖定位外掛Flutter地圖
- 用Kotlin擼一個圖片壓縮外掛-外掛基礎篇(二)Kotlin
- [需求建議]外掛建議:建議出一個時間軸外掛
- [外掛擴充套件]書架外掛(新外掛後臺)套件
- SVN外掛和Tomcat外掛地址Tomcat
- [外掛擴充套件]Ping外掛套件
- 推薦4款個人珍藏的IDEA外掛!幫你寫出不那麼差的程式碼Idea
- 外掛
- iOS原生彈框框架-TRCustomAlertiOS框架
- 推薦幾個 VSCode 摸魚外掛VSCode
- 自己寫一個vue的loading外掛Vue