JavaScript零基础入门 9:JavaScript读取元素的样式

作者简介:哪吒,CSDN2021博客之星亚军、新星计划导师✌、博客专家

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

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

目录

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

一、getComputedStyle()

1、getComputedStyle()是window的方法,可以获取元素当前的样式

2、两个参数

  1. 要获取样式的元素
  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、浏览器效果

JavaScript零基础入门 9:JavaScript读取元素的样式_第1张图片
备注: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、浏览器显示

JavaScript零基础入门 9:JavaScript读取元素的样式_第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、浏览器展示

JavaScript零基础入门 9:JavaScript读取元素的样式_第3张图片

四、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、浏览器展示

JavaScript零基础入门 9:JavaScript读取元素的样式_第4张图片

五、offsetParent

1、获取当前元素的父元素

2、代码实例

 var op = box1.offsetParent;
 alert(op.id);

3、浏览器展示

JavaScript零基础入门 9:JavaScript读取元素的样式_第5张图片

六、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、浏览器展示

JavaScript零基础入门 9:JavaScript读取元素的样式_第6张图片
在这里插入图片描述

作者简介:哪吒,CSDN2021博客之星亚军、新星计划导师✌、博客专家

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

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


上一篇:JavaScript零基础入门 8:document获取节点元素
下一篇:敬请期待

JavaScript零基础入门 9:JavaScript读取元素的样式_第7张图片

你可能感兴趣的:(javascript,java,前端)