<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 30px;
color: green;
/*width: 2000px;*/
height: 8000px;
}
button{
position: fixed;
bottom:0;
top:0;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
獲取css樣式 :css()方法;
不管css屬性是行內(nèi)的還是頭部或者外部。只要在標(biāo)簽上生效废士，都可以拿到該屬性的值，js只能獲取到行內(nèi)的css屬性;
var $bgColor = $('p').css('background-color')
console.log($bgColor);
var $color = $('p').css('color');
console.log($color)
設(shè)置css樣式: css()方法;
添加在行內(nèi)樣式表中,參數(shù)值如果有單位則一定要帶上單位
$('p').css('font-size','50px')
css方法一次添加多個(gè)樣式
$('p').css({
'font-size':'16px',
'color':'black'
})
設(shè)置、獲取元素的高度:height()
參數(shù)值可以為數(shù)值類型善玫，當(dāng)值是數(shù)值時(shí)默認(rèn)為px ;如果以其他單位為高度單位,需要傳遞包含單位類型的字符串
var $height = $('p').height();
console.log($height);
$('p').height('60%');
設(shè)置、獲取寬度等同高度的設(shè)置
設(shè)置密强、獲取元素相對(duì)于文檔的偏移量 獲取到的值是一個(gè)對(duì)象茅郎，可以通過(guò)訪問(wèn)left和top屬性的形式獲取到該標(biāo)簽相對(duì)于html標(biāo)簽(瀏覽器邊框)的左側(cè)和頂部的偏移量
任何類型的標(biāo)簽裹唆，都可以通過(guò)這個(gè)方法設(shè)置獲取/偏移量
var $offset = $('p').offset();
console.log($offset);
console.log('left:'+$offset.left+'top:'+$offset.top);*/
設(shè)置標(biāo)簽相對(duì)于文檔的偏移量
//(寫法一)
//var obj = {top:100,left:100};
//$('p').offset(obj);
//(寫法二)
//$('p').offset({top:100,left:100})
獲取標(biāo)簽相對(duì)于父標(biāo)簽(子標(biāo)簽必須參照父標(biāo)簽定位)的偏移量 :position 方法
/*var $position = $('p').position();
console.log($position);*/
注意: position 只能獲取值，不能設(shè)置值
獲取只洒、設(shè)置水平滾動(dòng)條的的位置 scrollLeft();
/*var $scrollLeft = $('p').scrollLeft();
console.log($scrollLeft);*/
注：首先必須先確認(rèn)要操作滾動(dòng)條是屬于哪個(gè)標(biāo)簽,在獲取到滾動(dòng)條對(duì)應(yīng)的標(biāo)簽后,在設(shè)置scrollLeft才會(huì)生效
設(shè)置：
//$('body').scrollLeft(500);
//$(window).scrollLeft(500);
//$(document).scrollLeft(500);
設(shè)置许帐、獲取垂直滾動(dòng)條的位置
獲取：
/*var $scrollTop = $('p').scrollTop();
console.log($scrollTop);*/
eg:
通過(guò)jQuery獲取到按鈕毕谴，添加點(diǎn)擊事件中在點(diǎn)擊事件中設(shè)置滾動(dòng)條的位置到返回頂部的目的
$('body').scrollTop(3000);
$('button').click((function){
$(document).scrollTop(0);
});
})
</script>
</head>
<body>
<p style="background-color: yellow;">地我定的那男的</p>
<button>回頂部</button>
</body>
</html>
