深圳 手机网站建设,在线制作书封网站,wordpress网站是什么,莱芜网站优化费用client offset scroll client、offset、scroll系列 他们的作用主要与计算盒模型#xff0c;盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离#xff0c; 说白了#xff0c; 就是边框的高度
clientLeft 内容区域到边框左部的距离#xff0c; 说白了#xff0… client offset scroll client、offset、scroll系列 他们的作用主要与计算盒模型盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 说白了 就是边框的高度
clientLeft 内容区域到边框左部的距离 说白了 就是边框的宽度
clientWidth 内容区域左右padding 可视宽度
clientHeight 内容区域上下padding 可视高度 client演示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle typetext/css*{padding: 0;margin: 0;}.box{width: 200px;height: 200px;position: absolute;border: 10px solid red;padding: 80px;}/style
/head
bodydiv classbox idbox专业丰富的课程体系博学多闻的实力讲师以及风趣生动的课堂在路飞不是灌输知识而是点燃你的学习火焰。专业丰富的课程体系博学多闻的实力讲师以及风趣生动的课堂在路飞不是灌输知识而是点燃你的学习火焰。专业丰富的课程体系博学多闻的实力讲师以及风趣生动的课堂在路飞不是灌输知识而是点燃你的学习火焰。专业丰富的课程体系博学多闻的实力讲师以及风趣生动的课堂在路飞不是灌输知识而是点燃你的学习火焰。/div/body
script typetext/javascriptvar oBox document.getElementById(box);console.log(oBox.clientTop);console.log(oBox.clientLeft);console.log(oBox.clientWidth);console.log(oBox.clientHeight);
/script
/html View Code 屏幕的可视区域 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbody/bodyscript typetext/javascript// 屏幕的可视区域window.onload function(){// document.documentElement 获取的是html标签console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);// 窗口大小发生变化时会调用此方法window.onresize function(){ console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);} }/script
/html View Code offset演示 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}/style/headbody styleheight: 2000pxdivdiv classwrap style width: 300px;height: 300px;background-color: greendiv idbox stylewidth: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px; /div/div/div/bodyscript typetext/javascriptwindow.onload function(){var box document.getElementById(box)/*offsetWidth占位宽 内容paddingborderoffsetHeight占位高 offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位那么是以父辈为基准的top值offsetLeft 如果盒子没有设置定位 到body的左部的距离如果盒子设置定位那么是以父辈为基准的left值* */console.log(box.offsetTop)console.log(box.offsetLeft)console.log(box.offsetWidth)console.log(box.offsetHeight)}/script
/html View Code scroll演示 实施监听滚动事件 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}/style/headbody stylewidth: 2000px;height: 2000px;div styleheight: 200px;background-color: red;/divdiv styleheight: 200px;background-color: green;/divdiv styleheight: 200px;background-color: yellow;/divdiv styleheight: 200px;background-color: blue;/divdiv styleheight: 200px;background-color: gray;/divdiv id scroll stylewidth: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;p学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界学习新技能达成人生目标开始用自己的力量影响世界/p/div/bodyscript typetext/javascriptwindow.onload function(){//实施监听滚动事件window.onscroll function(){
// console.log(1111)
// console.log(上document.documentElement.scrollTop)
// console.log(左document.documentElement.scrollLeft)
// console.log(宽document.documentElement.scrollWidth)
// console.log(高document.documentElement.scrollHeight)
}var s document.getElementById(scroll);s.onscroll function(){
// scrollHeight : 内容的高度padding 不包含边框console.log(上s.scrollTop)console.log(左s.scrollLeft)console.log(宽s.scrollWidth)console.log(高s.scrollHeight)}}/script
/html View Code 定时器 setTimeout() setInterval() 在js中有两种定时器 一次性定时器setTimeout()周期性循环定时器setInterval()setTimeout() 只在指定的时间后执行一次 /定时器 异步运行
function hello(){
alert(hello);
}
//使用方法名字执行方法
var t1 window.setTimeout(hello,1000);
var t2 window.setTimeout(hello(),3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器 setInterval() 在指定时间为周期循环执行 /实时刷新 时间单位为毫秒
setInterval(refreshQuery(),8000);
/* 刷新查询 */
function refreshQuery(){ console.log(每8秒调一次)
} 对于这两个方法需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作那么最好使用setInterval而如果不想由于连续调用产生互相干扰的问题尤其是每次函数的调用需要繁重的计算以及很长的处理时间那么最好使用setTimeout转载于:https://www.cnblogs.com/Xuuuuuu/p/10510461.html
