<!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属性是行内的还是头部或者外部。只要在标签上生效，都可以拿到该属性的值，js只能获取到行内的css属性;
var $bgColor = $('p').css('background-color')
console.log($bgColor);
var $color = $('p').css('color');
console.log($color)
设置css样式: css()方法;
添加在行内样式表中,参数值如果有单位则一定要带上单位
$('p').css('font-size','50px')
css方法一次添加多个样式
$('p').css({
'font-size':'16px',
'color':'black'
})
设置、获取元素的高度:height()
参数值可以为数值类型，当值是数值时默认为px ;如果以其他单位为高度单位,需要传递包含单位类型的字符串
var $height = $('p').height();
console.log($height);
$('p').height('60%');
设置、获取宽度等同高度的设置
设置、获取元素相对于文档的偏移量 获取到的值是一个对象，可以通过访问left和top属性的形式获取到该标签相对于html标签(浏览器边框)的左侧和顶部的偏移量
任何类型的标签，都可以通过这个方法设置获取/偏移量
var $offset = $('p').offset();
console.log($offset);
console.log('left:'+$offset.left+'top:'+$offset.top);*/
设置标签相对于文档的偏移量
//(写法一)
//var obj = {top:100,left:100};
//$('p').offset(obj);
//(写法二)
//$('p').offset({top:100,left:100})
获取标签相对于父标签(子标签必须参照父标签定位)的偏移量 :position 方法
/*var $position = $('p').position();
console.log($position);*/
注意: position 只能获取值，不能设置值
获取、设置水平滚动条的的位置 scrollLeft();
/*var $scrollLeft = $('p').scrollLeft();
console.log($scrollLeft);*/
注：首先必须先确认要操作滚动条是属于哪个标签,在获取到滚动条对应的标签后,在设置scrollLeft才会生效
设置：
//$('body').scrollLeft(500);
//$(window).scrollLeft(500);
//$(document).scrollLeft(500);
设置、获取垂直滚动条的位置
获取：
/*var $scrollTop = $('p').scrollTop();
console.log($scrollTop);*/
eg:
通过jQuery获取到按钮，添加点击事件中在点击事件中设置滚动条的位置到返回顶部的目的
$('body').scrollTop(3000);
$('button').click((function){
$(document).scrollTop(0);
});
})
</script>
</head>
<body>
<p style="background-color: yellow;">地我定的那男的</p>
<button>回顶部</button>
</body>
</html>
