JavaScript零基础入门 9：JavaScript读取元素的样式_Java攻城狮

irpas 02-07 4021

🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师?、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

目录一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数3、代码实例4、浏览器效果二、定义一个方法获取元素信息1、代码实例2、浏览器显示三、clientWidth和clientHeight1、这两个元素是获取元素的宽度和高度，不带px2、这两个元素是只读的，不可修改3、代码实例4、浏览器展示四、offsetWidth和offsetHeight1、获取元素的整个的宽度和高度，包括内容区、内边距和边框2、代码实例3、浏览器展示五、offsetParent1、获取当前元素的父元素2、代码实例3、浏览器展示六、offsetLeft和offsetTop1、offsetLeft2、offsetTop 七、scrollWidth和scrollHeight1、scrollWidth2、scrollHeight 八、scrollLeft和scrollTop1、scrollLeft2、scrollTop 九、事件的冒泡1、事件的冒泡指的是事件的向上传递，当后代元素的事件被触发时，其父元素的相同事件也会被触发。2、可以通过设置，取消事件的冒泡3、代码实例4、浏览器展示

一、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获取节点元素下一篇：敬请期待