2019-05-29jQuery样式设置
-
CSS
//设置样式
$(".container").css({
width:100,
height:"100px",
border:"1px solid red"
})
//获取样式
console.log($(".container").css("width"));
获取的是一个字符串
写法：A.offset();A.offset({top:值，left:值});
.myDiv{
width:100px;
height:100px;
padding:2px;
border: 1px solid red;
box-sizing: content-box;
position: relative;
left: 200px;
margin:300px;
}
......
console.log($(".myDiv").offset());
$(".myDiv").offset({
left:500,
top:"200px"
});
console.log($(".myDiv").offset());
获取A元素在当前视口的相对(窗口)偏移。跟原生JS中的offsetTop，offsetLeft作用相同，注意包含元素的margin值
返回的对象包含两个整型属性：top 和 left，以像素计
top设置失败，不能使用字符串设置，注意与css函数区分
获取匹配元素相对父元素(relative)的偏移。不能修改
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
.myDiv{
width:100px;
height:100px;
padding:2px;
border: 1px solid red;
box-sizing: content-box;
position: relative;
left: 200px;
margin:300px;
}
}
.test{
width:200px;
height:200px;
border:1px solid red;
margin:20px;
box-sizing: content-box;
}
......
<div class="myDiv">
<!-- <div class="sroll"></div> -->
<div class="test"></div>
</div>
......
console.log($(".test").offset());
console.log($(".test").position());
第一个输出相对于窗口，第二个输出相对于父级标签
offset时，test的left值 = myDiv的left + myDiv的margin + myDiv的padding+ myDiv的border + test的margin = 200 + 300 + 2 + 1 +20 = 523
position时，test的left值 = myDiv的padding= 2
（注意不包含test的margin值，因为test的margin也是test元素的一部分）
无参时获取匹配元素相对滚动条顶部的偏移，有一个参数时设置偏移。
此方法对可见和隐藏元素均有效。
console.log($(".container").scrollTop());
$(".container").scrollTop("100");
console.log($(".container").scrollTop());
-
scrollLeft([val])
-
尺寸
-
属性
设置或返回被选元素的属性值
* removeAttr(name)
* prop(n|p|k,v|f)
* removeProp(name)
-
CSS 类
-
HTML代码/文本/值
无参数时取得所有匹配元素的内容。
val参数时，设置匹配元素的内容。
function(index,text)参数时，index为元素在集合中的索引位置，text为原先的text值,函数返回一个字符串。
<div class="container">
<p>w</p>
<p>e</p>
<p>2</p>
</div>
......
$(" .container p").text(function(index,text){
console.log(text);
console.log(this);
return "这个 p 元素的 index 是：" + index;
});
image.png
原生JS获取元素尺寸和位置
盒子模型：html的每个标签都可以看作是盒子模型。从内到外依次是：content，padding，border，margin
盒子模型有两种
正常的是：width = content的width
ie下是：width = content的width + 左右的padding + 左右的border
1.区别JS 中 element 对象提供 offsetWidth, scrollWidth, clientWidth(每个都对应 的heigt)
-
clientWidth
clientWidth = content + padding(如果有滚动条，还需要减去滚动条的宽度。)
-
offsetWidth
offsetWidth = 内容 + padding + border（还包括滚动条的宽度，但大多时候滚动条的宽度是计算到 padding 和内容中的）。
-
scrollWidth
可滚动容器的大小，包括不可见的部分
2.如何获取元素的尺寸
-
element.style.width
这只能获取到行内样式
.myDiv{
width:100px;
height:100px;
}
......
<div class="myDiv">这里是一个div</div>
......
var div = document.querySelector(".myDiv");
console.log(div);
console.log(div.style.width);
获取到了div标签，但是获取不到width的值
<div class="myDiv" style="width:200px;">这里是一个div</div>
修改后获取到的行内样式
-
element.clientWidth，element.offsetWidth，element.scrollWidth
没有滚动条时：
.myDiv{
width:100px;
height:100px;
padding:2px;
border: 1px solid red;
box-sizing: content-box;
}
......
<div class="myDiv"></div>
......
var div = document.querySelector(".myDiv");
console.log(div.clientWidth);//104
console.log(div.offsetWidth);//106
console.log(div.scrollWidth);//104
有滚动条时：
.myDiv{
width:100px;
height:100px;
padding:2px;
border: 1px solid red;
box-sizing: content-box;
overflow: auto;
}
.sroll{
width:600px;
height:100px;
}
......
<div class="myDiv">
<div class="sroll"></div>
</div>
......
var div = document.querySelector(".myDiv");
console.log(div.clientWidth);
console.log(div.offsetWidth);
console.log(div.scrollWidth);
有滚动条时
clientWidth应该是100+2+2 = 104，但输出的是87，可得出104 - 87 =17被滚动条占了
offsetWidth的值为100+2+2+1+1=106，滚动条宽度对他的值没有影响
srollWidth的值为600+1+1 = 602
滚动条宽为17，17>2(padding的值)，可得滚动条占满了padding，占了content的17-2=15px的宽度
content的宽度变为：100-15 = 85px
滚动条宽度 = element.offsetWidth - border - element.clientWidth
-
getComputedStyle （IE 下 currentStyle）
返回一个数组
getComputedStyle(element).width:获取element的width(即是content的width)
-
element.getBoundingClientRect();
返回一个数组
汇总：
1、内高度、内宽度： 内边距 + 内容框
clientWidth
clientHeight
2、外高度，外宽度： 边框 + 内边距 + 内容框
offsetWidth
offsetHeight
3、上边框、左边框
clientTop
clientLeft
4、元素的大小及其相对于视口的位置
getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离
5、上边偏移量，左边的偏移量
offsetTop
offsetLeft
6、可视区域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
7、页面的实际大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
8、窗口左上角 与 屏幕左上角的 距离
window.screenX、
window.screenY
9、屏幕宽高
window.screen.width
window.screen.height
10、屏幕可用宽高（去除任务栏）
window.screen.availWidth
window.screen.availHeight
11、窗口的外高度、外宽度
window.outerWidth
window.outerHeiht
12、窗口的内高度、内宽度（文档显示区域+滚动条）
window.innerWidth
window.innerHeight
