JS笔记：深入的DOM操作

92.深入的DOM操作
1.查看滚动条的滚动距离
(1)
windowpageXOffset：X轴没有滚动条的话，结果就是0,
window'pageYOffset：Y轴有滚动条的话，这个属性的值表示滚动条滚动的距离。
但是上面的这两个方法ie8及ie8以下不兼容，下面的两个方法就可以使用了，而且兼容性很好
(2)所有的浏览器里面一定不会允许这两种方法同时都有值或者都没值，但是具体每个浏览器采用哪个不一定，不是ie什么的不兼容的问题，就是不允许。
所以一般用的时候我们都把它加起来，任何一个浏览器，这两个都必然有一个有值，必然有一个没值为0，所以加就好了，还有scroll是滚动条的意思
document.documentElement.scrollTop
document.documentElement.scrollLeft
document.body.scrollTop
document.body.scrollLeft

//调用getScrollOffset()函数返回滚动条滚动的距离。

93.深入的DOM操作（接92）
2.查看视口的尺寸：视口就是可视区
（1）window.innerWidth/window.innerHeight（加上滚动条宽度/高度）ie8及ie8以下不兼容
一般控制台在哪都会直接影响到这两个属性的大小
（2）标准模式下，任意浏览器都兼容
document.documentElement.clientHeight
document.documentElement.clientWidth
//Chome中document.documentElement.clientWidth/Height的值等于window.innerWidth/Height
（3）怪异模式下
document.body.clientWidth;
document.body.clientHeight;
标准模式和怪异模式的区别
浏览器的渲染模式有两种：
一种是标准模式，标准模式就是我们经常用的
第二种是怪异模式，它是防止后续浏览器版本更新升级过高而对前期的不兼容的。怪异模式也叫混杂模式，也就是向后兼容，
大致意思启动怪异模式后，就是例如老版本的ie5，ie6的代码，现在的ie浏览器可以使用，
所以怪异模式下的语法规则与标准模式下的语法规则一定是不一样的。
怪异模式怎样来触发呢？
条件只有一个：在代码顶端的DOCTYPE去掉就是怪异模式
还有每个浏览器的怪异模式都可能不一样
例1：
标准模式下document.compatMode结果是CSS1Compat
怪异模式下document.compatMode结果是BackCompat（向后兼容）
（4）封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<script type="text/javascript">
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight,
}
}
if (document.compatMode == "CSS1Compat") {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight,
}
}
else {
return {
w: document.body.clientWidth,
w: document.body.clientHeight,
}
}
}
</script>
</body>
</html>

//查看视口尺寸时直接在控制台上打印getViewportOffset()就可以了

94.深入的DOM操作（接92）
3.查看元素的几何尺寸：查看元素的属性方法，肯定是元素的方法，肯定是DOM对象的方法，不存在window，document什么的。
（1）getBoundingClientRect()
（2）兼容性很好
（3）该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
（4）height和width属性老版本IE并未实现
（5）返回的结果并不是实时的，得到的数据是副本，要是已经得到对象，再改变属性，对象里属性的不会变。
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div{
position:absolute;
height : 100px;
width:100px;
background-color:red;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>

调用div.getBoundingClientRect()，得到一个对象如下
bottom:200
height:100
left:100
right:200
top:100
width:100
x:100
y:100
__proto__:DOMRect
//得到的left和top代表它的左上点的位置，right和bottom代表的是它的右下角的位置，
//相对的是网页最左上角的位置，从那往下是y轴的正半轴，往右是x轴的正半轴，计算机坐标系和正常的坐标系y正轴不一样。
//假如是圆形不是矩形，那会以构造它的矩形的顶点作为圆角的什么坐标什么顶点之类的。
//老版本ie不能实现height和width，那么采用的方法就是right - left得到width，bottom - top得到height
（5）封装兼容性方法（用函数的话，就要传参数，在原型链上编程就不用传参数直接用this就可以）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
div {
position: absolute;
height: 100px;
width: 100px;
background-color: red;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
Element.prototype.getElementOffset = function () {
var objData = this.getBoundingClientRect();
if (objData.height) {
return {
w: objData.width,
h: objData.height,
}
} else {
return {
w: objData.right - objData.left,
h: objData.bottom - objData.top,
}
}
}
</script>
</body>
</html>

努力努力再努力LFY

发布了53 篇原创文章 · 获赞 12 · 访问量 9928

私信关注

JS笔记：深入的DOM操作

猜你喜欢