前端基礎-JQuery操做樣式

第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

相關文章
相關標籤/搜索