2019-05-29jQuery样式设置

• CSS

  • css(name|pro|[,val|fn])^1.9*

  //设置样式
  $(".container").css({
    width:100,
    height:"100px",
    border:"1px solid red"
  })
  //获取样式
  console.log($(".container").css("width"));

获取的是一个字符串

• jQuery.cssHooks

---

• 位置

  • offset([coordinates])

写法：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函数区分

• position()

获取匹配元素相对父元素(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元素的一部分）

• scrollTop([val])

无参时获取匹配元素相对滚动条顶部的偏移，有一个参数时设置偏移。
此方法对可见和隐藏元素均有效。

console.log($(".container").scrollTop());
$(".container").scrollTop("100");
console.log($(".container").scrollTop());

• scrollLeft([val])

• 尺寸

  • height([val|fn])
  • width([val|fn])
  • innerHeight()
  • innerWidth()
  • outerHeight([options])
  • outerWidth([options])

• 属性

  • attr(name|pro|key,val|fn)

设置或返回被选元素的属性值
* removeAttr(name)
* prop(n|p|k,v|f)
* removeProp(name)

• CSS 类

  • addClass(class|fn)
  • removeClass([class|fn])
  • toggleClass(class|fn[,sw])

• HTML代码/文本/值

  • html([val|fn])

  • text([val|fn])

无参数时取得所有匹配元素的内容。
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

• val([val|fn|arr])

---

原生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

参考资料：

https://www.cnblogs.com/lcf1314/p/9714015.html

https://blog.csdn.net/KleyChan/article/details/83042294