JS操作html元素中的client
2019-08-07 本文已影响20人
追逐_chase
web.jpeg
client 可视区域的内容
image.png
<script>
var dvOBjc = document.getElementById("dv");
// client 是可视区域 可以看到的区域
//
dvOBjc.onclick = function(){
// 获取元素的宽度和高度 包括 内容区域 和 padding
// 不包含边框
console.log(dvOBjc.clientWidth);
console.log(dvOBjc.clientHeight);
//左边边框的 宽度
console.log(dvOBjc.clientLeft);
//上边边框的宽度
console.log(dvOBjc.clientTop);
}
</script>
image.png
可以得出结论是:
clientWidth是不包含边框的宽度，clientLeft是左边框的宽度clientX可是区域的 横坐标，clientY可视区域的 纵坐标
div跟着鼠标移动
Untitled.gif
<script>
var dv = document.getElementById("dv");
var width = dv.offsetWidth;
var height = dv.offsetHeight;
document.onmousemove = function(e){
//有一个隐藏的参数
//但是IE8一下不支持
// clientX可是区域的 横坐标
// clientY可视区域的 纵坐标
e = window.event || e;
dv.style.left = e.clientX - width *0.5 + "px";
dv.style.top = e.clientY - height *0.5 + "px";
//在IE8一下
// window.event.clientX
// window.event.clientY
}
</script>
每一个事件处理函数都有一个
隐藏的event 事件参数对象，但是IE8之前是没有的window.event代替
获取可视区域的宽度和高度
-
IE和谷歌,火狐在获取可视区域的时候，不同版本的浏览器存在不同的差异 -
w3c标准中document.compatModet模式来判断是不是怪异的浏览器,CSS1Compat规定声明了<!DOCTYPE html>,BackCompat未声明 - 比较特殊的一点是早期的
谷歌浏览器是没有<!DOCTYPE html>所以一般使用document.body获取client对应的 -
IE浏览器是通过window对象的innerWidth
function client(){
//IE浏览器
if(window.innerWidth != null){
return {
width:window.innerWidth,
height:window.innerHeight
}
}
//W3c标准的模式
if(window.compatMode == "CSS1Compat"){
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
//怪异模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
