原生JS仿寫jQuery css方法

2022-09-14 04:57:06 字數 1008 閱讀 2431

jquery中css方法使用  

$().css(css屬性名,屬性值);

$().css();

呼叫者應為jq物件 ,該方法引數有兩種情況

1. 兩個引數:   第乙個引數為css屬性名,  第二個引數為屬性值

2.引數為乙個物件,    物件的鍵和值 都以字串形式傳入, 

由於js中所有事物皆為對物件,因此   將該方法新增到 object原型鏈上

2. 兩種常用的獲取dom元素的方法

document.queryselector()

document.queryselectorall(')

列印可以發現  

queryselector獲取的是標籤元素

而queryselectorall 獲取的是乙個列表 乙個偽陣列

因此 當我們為其設定樣式的時候應分為兩種情況

1.  當呼叫物件為單一標籤元素的時候,  直接設定其屬性樣式

2. 當呼叫物件為 nodelist 時 要將其遍歷, 迴圈為其中的標籤元素設定樣式屬性

綜上所述:  實現時應該可以先判斷  傳入的引數的個數 和 型別

然後判斷呼叫者是標籤元素還是 nodelist 陣列

具體**實現如下:

object.prototype.css=function

() }

else

}//若引數只有乙個,並且引數型別為object, 視為 css()

if (arguments.length = 1 && typeof (arguments[0]) == 'object')

}else

}//可以使其鏈式呼叫

return

this

; }

使用:顯示

原生 js 寫分頁

這段 是用原生 js 寫的乙個分頁的效果 doctype html html lang en head meta charset utf 8 title document title style ul ul li div ul background style head body div id di...

原生js寫瀑布流

準備用自學的jquery寫的,但是不熟悉api,忘得乾乾淨淨了,然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度,獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...

初來乍到 原生js寫日曆

js日常 思路 1.獲取到每個月具體的天數 2.獲取每天具體的星期值 下面展示一些html 塊。out ppp prev 上一月 span nian span next 下一月 span p yue p week ul date ul div 簡單的大體結構 外面一層div套住 ul,li out ...