jQuery 樣式操作
1良拼、基本樣式操作
說明:設(shè)置或獲取-->元素的樣式屬性值
場景一:設(shè)置單個樣式
$(selector).css("color", "red");
// 第一個參數(shù)表示:樣式屬性名稱
// 第二個參數(shù)表示:樣式屬性值
場景二:設(shè)置多個樣式
$(selector).css({"color": "red", "font-size": "30px"});
// 參數(shù)為 {}(對象)
//也可以設(shè)置單個樣式
場景:
var fs = $(selector).css("font-size");
// 參數(shù)表示要獲取的 樣式屬性名稱
2码秉、類樣式操作
用到的方法:
addClass() //添加
removeClass()//移除
hasClass()//判斷
toggleClass()//切換
作用:為指定元素添加類className
$(selector).addClass("liItem");
作用:為指定元素移除類 className
$(selector).removeClass("liItem");
$(selector).removeClass(); //不指定參數(shù)纵竖,表示移除被選中元素的所有類
作用:判斷指定元素是否包含類 className
var hasC = $(selector).hasClass("liItem");
//此時偎谁,會返回true或false
作用:為指定元素切換類 className盆佣,該元素有類則移除系冗,沒有指定類則添加岖研。
$(selector).toggleClass("liItem");
操作類樣式的時候显押,所有的類名 都不帶點(diǎn)(.)
經(jīng)驗(yàn):
1 操作的樣式非常少浸踩,那么可以通過.css()這個 方法來操作
2 操作的樣式很多叔汁,那么要通過使用類的方式來操作
3 如果考慮以后維護(hù)方便(把CSS從js中分離出來)的話,推薦使用類的方式來操作检碗。類比CSS書寫位置(把css從html中分離出來)
3据块、其他樣式操作
$(selector).height() // 設(shè)置或返回匹配元素的高度。 ( 數(shù)值類型 )
$(selector).width() // 設(shè)置或返回匹配元素的寬度折剃。
$(selector).css("height"); // 字符串類型
$(selector).offset() // 返回第一個匹配元素相對于文檔左上角的位置另假。left,top
$(selector).offsetParent() // 返回最近的定位祖先元素。
$(selector).position() // 返回第一個匹配元素相對于父元素的位置怕犁。
$(window).scrollLeft() // 設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移边篮。
$(window).scrollTop(0) // 設(shè)置或返回匹配元素相對滾動條頂部的偏移。
$(selector).scroll(function() {}); // 滾動事件
對scrollTop的理解:
垂直滾動條位置 是可滾動區(qū)域 在 可視區(qū)域上方的 被隱藏區(qū)域的高度奏甫。
如果滾動條在最上方?jīng)]有滾動 或者 當(dāng)前元素沒有出現(xiàn)滾動條戈轿,那么這個距離為0