第6章 JQuery操做樣式
6.1 CSS操做
-
功能:設置或者修改樣式,操做的是style屬性。javascript
-
操做單個樣式css
// name:須要設置的樣式名稱 // value:對應的樣式值 // $obj.css(name, value); // 使用案例 $('#one').css('background','gray');// 將背景色修改成灰色
- 設置多個樣式
// 參數是一個對象,對象中包含了須要設置的樣式名和樣式值 // $obj.css(obj); // 使用案例 $('#one').css({ 'background':'gray', 'width':'400px', 'height':'200px' });
- 獲取樣式
// name:須要獲取的樣式名稱 // $obj.css(name); // 案例 $('div').css('background-color');
注意:獲取樣式操做只會返回第一個元素對應的樣式值。java
6.2 jQuery尺寸和位置操做
6.2.1 width方法與height方法
- 設置或者獲取高度,不包括內邊距、邊框和外邊距
// 帶參數表示設置高度 $('img').height(200); // 不帶參數獲取高度 $('img').height();
獲取網頁的可視區寬高web
// 獲取可視區寬度 $(window).width(); // 獲取可視區高度 $(window).height();
6.2.2 innerWidth/innerHeight/outerWidth/outerHeight
innerWidth()/innerHeight() 方法返回元素的寬度/高度(包括內邊距)。 outerWidth()/outerHeight() 方法返回元素的寬度/高度(包括內邊距和邊框)。 outerWidth(true)/outerHeight(true) 方法返回元素的寬度/高度(包括內邊距、邊框和外邊距)。
6.2.3 scrollTop與scrollLeft
- 設置或者獲取垂直滾動條的位置
// 獲取頁面被捲曲的高度 $(window).scrollTop(); // 獲取頁面被捲曲的寬度 $(window).scrollLeft();
6.2.4 offset方法與position方法
- offset方法獲取元素距離document的位置,position方法獲取的是元素距離有定位的父元素(offsetParent)的位置。
// 獲取元素距離document的位置,返回值爲對象:{left:100, top:100} $(selector).offset(); // 獲取相對於其最近的有定位的父元素的位置。 $(selector).position();
本文同步分享在 博客「cwl_java」(CSDN)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。svg