JavaScript学习笔记011-DOM页面元素的运用
JavaScript学习笔记011-DOM页面元素的运用
Mr. 柳上原
发布于 2018-09-05 15:21:35
发布于 2018-09-05 15:21:35
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
给大家分享一个工作中遇到的事情：
分公司人事部的电脑坏了
老总叫我们网络营销部去给分公司送电脑
去了安装好电脑后
他们说打印机坏了
让我们修
我们看了一下
不是连接问题
好像是打印机老化，硬件问题
于是跟老总说，叫个电脑维修的过来看看吧
老总表现的很不满意，说
你们要多学点东西，身为网络部的，连打印机都不会修
后来在一次员工会议上，老总又提到这件事，他说
分公司很多人对网络部不满意，觉得你们做事不靠谱，连打印机都不会修
当时很想问他一句话
你会开车，那就一定得要会修车是吗
想想算了，跟一个完全不懂网络的大伯解释软件与硬件问题
解释不通，反而产生更大的矛盾
生活中总是会遇到很多问题和矛盾
如何去做，这是一个值得思考的问题？
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id="box">
<div id="b1"></div>
<p></p>
</div>
<script>
const box = document.getELementById("box");
// 元素尺寸获取
box.offsetWidth; // box的样式宽度+左右padding+左右border
box.offsetHeight; // box的样式高度+上下padding+上下border
box.offsetTop; // box的顶部到定位父级顶部的距离
box.offsetLeft; // box的左边到定位父级左边的距离
box.clientWidth; // box的样式宽度+左右padding
box.clientHeight; // box的样式高度+上下padding
getComputedStyle(box).width; // box的样式宽度
getComputedStyle(box).height; // box的样式高度
box.getBoundingClientRect( ); // box到视口左上角的距离（width和height除外）
box.scrollIntoView( ); // box滚动到视口区域
window.innerWidth; // 浏览器窗口宽度
window.innerHeight; // 浏览器窗口高度
document.documentElement.clientWidth; // 文档可视宽度
document.documentElement.clientHeight; // 文档可视高度
document.documentElement.offsetWidth; // 文档真实宽度
document.documentElement.offsetHeight; // 文档真实高度
document.documentElement.scrollTop; // 文档顶部滚动的距离
document.documentElement.scrollLeft; // 文档左边滚动的距离
box.scrollWidth; // 内容超出时:输出值=内容宽度+左边padding，超出隐藏时:输出值=内容宽度+左右padding
box.scrollHeight; // 内容超出时:输出值=内容宽度+上边padding，超出隐藏时:输出值=内容宽度+上下padding
// event 事件信息对象
ducoment.onclick = function (e){ // 点击事件
e = e || window.event; // 兼容写法
console.log(e);
/*
参数e：
主流浏览器：事件函数的第一个形参
低版本IE浏览器：window.event
*/
}
/*
鼠标相关：
clientX
clientX // 鼠标点击的位置相对于当前文档可视区窗口左上角的坐标
pageX
pageY // 鼠标点击的位置相对于文档顶部左上角的坐标
不兼容IE
兼容IE写法：pageX = clientX + document.documentElement.scrollLeft;
pageY = clientY + document.documentElement.scrollTop;
target // 指向事件触发源
不兼容低版本IE
低版本IE使用：srcElement
type // 事件名称
which // 鼠标键位对应的值
*/
document.onkeydown = function (e){ // 键盘输入事件
e = e || window.event; // 兼容写法
console.log(e.key);
}
/*
键盘相关：
key // 按下的键
keyCode // 键对应的值
*/
window.onresize = function (){ // 窗口变化事件
console.log(window.innerWidth);
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读