🍅 作者简介:哪吒,CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪
🍅 哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师
🍅 关注公众号【哪吒编程】,回复1024,获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
目录
一、getComputedStyle()
1、getComputedStyle()是window的方法,可以获取元素当前的样式
2、两个参数
- 要获取样式的元素
- 可以传递一个伪元素,一般都传null
该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象样式名来读取样式,如果获取的样式没有设置,则会获取到真实的值,而不是默认值。
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var obj = getComputedStyle(box1,null);
alert(getComputedStyle(box1,null).width);
};
};
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
4、浏览器效果
备注:IE无效
二、定义一个方法获取元素信息
1、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 定义一个函数,用来获取指定元素的当前的样式
var ret = getBoxStyle(box1,"width");
alert(ret);
};
};
/*
* 参数:
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getBoxStyle(obj , name){
if(window.getComputedStyle){
//谷歌/edge浏览器,具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE没有getComputedStyle()方法,下面为IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
2、浏览器显示
三、clientWidth和clientHeight
1、这两个元素是获取元素的宽度和高度,不带px
2、这两个元素是只读的,不可修改
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(box1.clientWidth);
alert(box1.clientHeight);
};
};
</script>
</head>
<body id="body">
<button id="btn01">亲我一下</button>
<div id="box1"></div>
</body>
</html>
4、浏览器展示
四、offsetWidth和offsetHeight
1、获取元素的整个的宽度和高度,包括内容区、内边距和边框
2、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* offsetWidth
* offsetHeight
* - 获取元素的整个的宽度和高度,包括内容区、内边距和边框
*/
alert(box1.offsetWidth);
};
};
</script>
</head>
<body id="body">
<button id="btn01">亲我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
3、浏览器展示
五、offsetParent
1、获取当前元素的父元素
2、代码实例
var op = box1.offsetParent;
alert(op.id);
3、浏览器展示
六、offsetLeft和offsetTop
1、offsetLeft
当前元素相对于其定位父元素的水平偏移量
2、offsetTop
当前元素相对于其定位父元素的垂直偏移量
七、scrollWidth和scrollHeight
1、scrollWidth
可以获取元素整个滚动区域的宽度
2、scrollHeight
可以获取元素整个滚动区域的高度
八、scrollLeft和scrollTop
1、scrollLeft
获取水平滚动条滚动的距离
2、scrollTop
获取垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight,说明垂直滚动条滚动到底了。
当满足scrollWidth - scrollLeft == clientWidth,说明水平滚动条滚动到底了。
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上传递,当后代元素的事件被触发时,其父元素的相同事件也会被触发。
2、可以通过设置,取消事件的冒泡
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nz{
width: 200px;
height: 100px;
background-color: rgb(205, 112, 50);
}
#yy{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//为云韵绑定一个单击响应函数
var yy = document.getElementById("yy");
yy.onclick = function(event){
event = event || window.event;
alert("我是云韵");
//取消冒泡
//可以将事件对象的cancelBubble设置为true,即可取消冒泡
//event.cancelBubble = true;
};
//为哪吒绑定一个单击响应函数
var nz = document.getElementById("nz");
nz.onclick = function(event){
event = event || window.event;
alert("我是哪吒");
event.cancelBubble = true;
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="nz">
我是哪吒
<span id="yy">我是云韵</span>
</div>
</body>
</html>
4、浏览器展示
🍅 作者简介:哪吒,CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪
🍅 哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师
🍅 关注公众号【哪吒编程】,回复1024,获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
上一篇:JavaScript零基础入门 8:document获取节点元素
下一篇:敬请期待