获取元素样式
获取内联样式
该方法属于直接获取样式
语法： 元素.style.样式名
<div id="box1" style="width: 100px;" >
</div>
<script>
let box1 = document.getElementById('box1')
console.log(box1.style.width); // 100px
</script>
获取当前显示的样式
语法：元素.currentStyle.样式名
它可以读取当前显示样式的值
currentStyle 只有IE支持
在其他浏览器用getComputedStyle( )方法获取元素样式
var obj = getComputedStyle(box1,null);
该方法会返回一个对象，对象里封装了对应的样式
输出获得的obj对象：
如果样式没有设置，则会获取真实的值，而不是默认值
obj.width 就会显示对应宽度
<div id="box1" style="width: 100px;" >
</div>
<script>
let box1 = document.getElementById('box1') // 获取box1 元素
let obj = getComputedStyle(box1)// 获取box1对象
console.log(obj.width); // 打印box1盒子的宽度 100px
</script>
获取元素可见样式
clientWidth
clientHeight
- 这两个属性都可以获取元素的可视宽度高度
- (包括内容区和内边距)
- 这些属性都是不带px的，返回一个数字，可以直接进行计算
offsetWidth
offsetHeight
- 包括内容区，内边距，跟边框的元素的高度、宽度
offsetParent
- 获取当前元素的定位父元素
- 会获取当前最近的开启定位的祖先元素
offsetLeft
offsetTop
- 获取相当于当前定位父元素的水平偏移量和垂直偏移量
scrollWidht
scrollHeight
- 可以获取元素整个滚动区域的宽度和高度
scrollLeft
scrollTop
- 可以获取水平滚动移动的距离
- 可以获取垂直滚动条滚动的距离
pageY
— 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算。
clientY
— 窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。
当满足scrollHeight - scrollTop == clientHeight时
- 说明垂直滚动条拖到底了
当满足scrollWidht - scrollLeft == clientWidth
- 说明水平滚动条托到底了
利用此可以实现一个用户条例案例
style>
#inf{
width: 400px;
height: 1000px;
overflow: auto;
}
</style>
<script>
window.onload = function(){
// 获取inf的滚动长度
var inf = document.getElementById("inf");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 绑定一个元素滚动事件 不能给window绑定
inf.onscroll = function(){
if(parseInt(inf.scrollHeight) - parseInt(inf.scrollTop) == parseInt(inf.clientHeight)){
alert("你已经阅读完");
//js中true 禁用按钮 false 开启按钮
btn1.disabled = false;
btn2.disabled = false;
}
}
</script>
</head>
<body>
<p>欢迎亲爱的用户注册</p>
<div id="inf">
XXX
</div>
// 设置禁用 disabled 内的值可以随便填
<input id="btn1" type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
<input id="btn2" type="submit" value = "注册" disabled="disabled">
<button id ="btn3"></button>
</body>
当鼠标条到最底部时触发，然后将按钮的禁用取消，并且提示用户已经阅读完毕
坐标
要移动页面的元素，我们应该先熟悉坐标。
大多数 JavaScript 方法处理的是以下两种坐标系中的一个：
相对于窗口 — 类似于 position:fixed，从窗口的顶部/左侧边缘计算得出。
- 我们将这些坐标表示为
clientX/clientY，当我们研究事件属性时，就会明白为什么使用这种名称来表示坐标。
相对于文档 — 与文档根（document root）中的 position:absolute 类似，从文档的顶部/左侧边缘计算得出。
- 我们将它们表示为
pageX/pageY。
当页面滚动到最开始时，此时窗口的左上角恰好是文档的左上角，它们的坐标彼此相等。但是，在文档移动之后，元素的窗口相对坐标会发生变化，因为元素在窗口中移动，而元素在文档中的相对坐标保持不变。
在下图中，我们在文档中取一点，并演示了它滚动之前（左）和之后（右）的坐标：
当文档滚动了：
pageY— 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算。clientY— 窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。
元素坐标：getBoundingClientRect
方法 elem.getBoundingClientRect() 返回最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象。
主要的 DOMRect 属性：
x/y— 矩形原点相对于窗口的 X/Y 坐标，width/height— 矩形的 width/height（可以为负）。
此外，还有派生（derived）属性：
top/bottom— 顶部/底部矩形边缘的 Y 坐标，left/right— 左/右矩形边缘的 X 坐标。
页面上的任何点都有坐标：
- 相对于窗口的坐标 —
elem.getBoundingClientRect()。- 相对于文档的坐标 —
elem.getBoundingClientRect()加上当前页面滚动。窗口坐标非常适合和
position:fixed一起使用，文档坐标非常适合和position:absolute一起使用。这两个坐标系统各有利弊。有时我们需要其中一个或另一个，就像 CSS
position的absolute和fixed一样。
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
