开发者学堂课程【jQuery 开发教程：jQuery_CSS 属性下】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4298
jQuery_CSS 属性下
目录：
一、css 属性 offset
二、css 属性 outerHegiht
三、css 属性 posistion
四、css 属性 scrollLeft
五、css 属性 scroTop
一、offset()
在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。设置匹配的元素集合中每一个元素的坐标 ，坐标相对于文档。
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title></title>
<script src="jquery-2.2.1.min.js"></script>
<style>
//初始化
*{
margin: 0;
padding: 0;
}
div{
width: 100px ;
hleight: 200px;
padding: 100px ;
margin: 100px;
border: 2px solid green;
< /style>
</head>
<body>
<div>我是一个div</div><script>
$ ( function(){
var div=$ ( "div") ;
Var zoubiao={
Top:300,
Left:500
}
console.log(div.offset());
//传入对象，offset 设置坐标写法
console.log(div.offset(zoubiao));
$ ("div").css( "color" , "red");})
< /script>
< / body>
< /html>
执行效果：
返回的是一个 number 类型
二、outerHeight( )
获取元素集合中第一个元素的当前计算高度值,包括 padding ,border 和选择性的margin。返回个整数(不
包含"px" )表示的值或如果在一个空集合 上调用该方法，则会返回 null。
三、outerWidth（）：
获取元素集合中第一个元素的当前计算宽度值，包括 padding,border 和选择性的margin。(注:返回一个整数(不包含“px”)表示的值，或如果在一个空集合上调用该方法，则会返回 null.)
示例：
<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src=" jquery-2.2.1.min.js"></script>
<style>
*{
Margin: θ ;
padding :θ;
}
div {
width:100px;
height:200px;
padding:100px;
margin:100px;
border:2px solid green;
</style>
<head>
<body>
<div>我是一个div</div>
<script>
$(function () {
var div=$("div");
// var zuobiao= {
// top:300，
// left: 500
// };
//console.log(div. offset(zuobiao));
console. log (div. outerHeight ());
console. log (div. outerwidth (ture));
}）
</script>
< /body
</html>
新建一个
<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src=" jquery-2.2.1.min.js"></script>
<style>
*{
margin: θ; padding: θ;
}
div {
padding: 15px;
background-color: antiguewhite ;
}
p{
margin-left: 10px;
background-color: aquamarine ;
}
</style>
<head>
<body>
<div>
<p>我是内层</p>
</div><script >
$ ( function() {|
var po=$("p").position() ;
console.log(po);
})
</script>
//新文件
<! DOCTYPE html >
<html lang ="en”>
<head>
<meta charset ="UTF-8">
<title></title>
<script src=" jquery-2.2.1.min.js"></script>
<style>
.demo {
width:200px；
height: 100px;
overflow : auto;
margin:5px;
padding: 5px ;
position : relative;
border:3px solid#666666;
background-coLor :#cccccc;
}
P {
width:1000px;
height :1000px;
margin: 10px ;
padding: 5px ;
border: 2px solid #666666 ;
</style>
<head>
<body>
<div class=“demo”>
<hl> lalala </h1>
<p>hello</p>
</div>
<script>
$ ( function() {
$(".demo") . scrollTop (300) ;
})
Console.log（$(".demo") . scrollTop ()）；
}）
</script>
</body>
</html>
三、position()
获取匹配元素中第一个元素的当前坐标，相对于 offset parent 的坐标。(译者注: offset parent 指离该元素最近的而且被定位过的祖先元素)
四、scrollLeft()
获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条位置。
五、scrolTop()
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动备位置
示例：
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title></title>
<script src="jquery-2.2.1.min.js"></script></head>
<style>
.demo{
width: 200px;height: 100px;overflow: auto;margin: 5px;padding: 5px ;
position: relative;
border: 3px solid #666666;background-color: #cccccc;
}
P{
width: 1000px;height: 1000px;margin: 10px;padding:
5px;
border: 2px solid #666666;
</style>
< / head>
<body>
<div class="demo">
<h1>lalala< /h1>
<p>hello</ p>
</div>
执行效果：