JavaScript零基础入门 9：JavaScript读取元素的样式_javascript中获取元素的样式信息-CSDN博客

本文链接：https://blog.csdn.net/2401_84447233/article/details/138287911

在这里插入图片描述
备注：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;


### 最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

  ![](https://img-blog.csdnimg.cn/img_convert/64ce8432d0f753e43f93972ad19fcd72.png)


![](https://img-blog.csdnimg.cn/img_convert/d508b1ae6a5e7d5e7d5daf668e9eccea.png)