JavaScript 特效之四大家族(offset/scroll/client/event)

offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
document.body.scrollTop
document.documentElement.scrollTop
window.pageYOffset
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop + document.body.scrollTop;
Box.onclick = function (aaa){ aaa就是event }
var event = event || window.event;(主要用这种)
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)
window.screen.width
window.screen.height
JavaScript 特效之四大家族(offset/scroll/client/event)的更多相关文章
- 三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
- offset / scroll / client Left / Top
1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...
- offset,scroll,client系列
offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...
- JS中的offset scroll event client
一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- JavaScript特效(调试笔记)
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
随机推荐
- C#设计模式(16)——中介者模式
1.中介者模式介绍 中介者模式,定义了一个中介对象来封装一系列对象之间的交互关系,中介者使各个对象之间不需要显式地相互引用,从而降低耦合性.在开发中我们会遇到各个对象相互引用的情况,每个对象都可以和多 ...
- golang命令行库cobra使用
github地址:https://github.com/spf13/cobra Cobra功能 简单子命令cli 如 kubectl verion kubectl get 自动识别-h,--h ...
- Git以及TortoiseGit的下载安装使用
Git以及TortoiseGit的下载安装使用 下载git 下载地址:https://git-scm.com/然后进行一系列的安装,傻瓜式的操作即可 TortoiseGit Tortoise 英[ˈt ...
- C++-int类型整数超出范围后的处理
最近做了一道题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: ...
- Contest2161 - 2019-3-21 高一noip基础知识点 测试4 题解版
传送门 预计得分:100+100+100+10=310 实际得分:100+0+82+10=192 你们基础知识不行啊——by wxg T1 一看数据范围就是搜索 但是不能因为数据范围就断送了dp的心 ...
- 你对安卓触控一体机了解多少?视野还停留在windows一体机上?
android一体机可以根据用户的不同需求拓展各种不同的硬件外接设备和各种应用软件,环境适应能力又强,所以在诸多领域的应用都非常受欢迎,并且还在不断地开拓新市场.安卓系统触摸一体机占据绝对性优势. 1 ...
- mongoose 连接数据库操作
连接数据库 var mongoose = require('mongoose'); var schema = mongoose.Schema; // 连接MongoDB mongoose.connec ...
- [好文mark] 深度学习中的注意力机制
https://cloud.tencent.com/developer/article/1143127
- Fiddler模拟自动响应数据
Fiddler模拟自动响应数据 定位到要修改的部分 2.将返回的数据保存到本地,保存成网页,并修改响应数据 找到修改的部分,修改之 3.再次请求刷新首页,将工具定位到autoresponder将接口加 ...
- 【原创】大数据基础之Drill(2)Drill1.14+Hive2.1.1运行
问题 Drill最新版本是1.14,从1.13开始Drill支持hive的版本升级到2.3.2,详见1.13的release notes The Hive client for Drill is up ...