心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

发布时间：2022-06-27 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

目录

    • 一、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读取元素的样式，蓄势待发

备注：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读取元素的样式，蓄势待发

三、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读取元素的样式，蓄势待发

四、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读取元素的样式，蓄势待发

五、offsetParent

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

2、代码实例

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

3、浏览器展示

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

六、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读取元素的样式，蓄势待发

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

十、新星计划

对参与「新星计划」的博文，官方不会给予流量扶持，需要学员借助导师的指导，凭借自然流量登上热榜和推荐流；

每位学员每周需保证更新不少于2篇的原创文章，如果当周少于2篇文章则失去参赛资格；

学员在报名时请务必准确选择【赛道入口】，赛道一经选定不可修改；

在培训期间，每位导师需要组织不少于2次的培训，围绕文章创作、直播演绎、内容设计、上榜规则解读等进行；

活动结束后由社区博主进行评选，将根据博文进入热榜的次数、进入推荐流的次数、增粉数据、综合博文数据等指标进行评选，每个社区评选10位优胜者（10*3），获得专属奖品。 这里是“新星计划·第二季”【Java】赛道的报名入口！ 1、Java从入门到项目实战 2、SQL从入门到精通 3、手把手教你学Linux 4、Python从入门到项目实战

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

🍅 Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强） 🍅 基础推荐：Java基础教程系列 🍅 实战推荐：Spring Boot基础教程 🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪 🍅 扫描主页左侧二维码，加入群聊，一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝

上一篇：JavaScript零基础入门 7：JavaScript基础函数 下一篇：敬请期待

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

添加微信，备注1024，赠送Java学习路线思维导图

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

 官网免费送试用流量

扫码加入技术交流群！

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

 

关注微信公众号，回复1024，获取Java思维导图

 

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发

脚本宝典总结

以上是脚本宝典为你收集整理的大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发全部内容，希望文章能够帮你解决大学生不懂蓝桥杯？学习JavaScript读取元素的样式，蓄势待发所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程