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

目录

• • 一、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、代码实例

	
		
		
		
		
		
	
	
		戳我一下
		


		

	

4、浏览器效果

备注：IE无效

二、定义一个方法获取元素信息 1、代码实例

	
		
		
		
		
		
	
	
		戳我一下
		


		

	

2、浏览器显示

三、clientWidth和clientHeight 1、这两个元素是获取元素的宽度和高度，不带px 2、这两个元素是只读的，不可修改 3、代码实例

	
		
		
		
		
	
	
		亲我一下
		

	

4、浏览器展示

四、offsetWidth和offsetHeight 1、获取元素的整个的宽度和高度，包括内容区、内边距和边框 2、代码实例

	
		
		
		
		
	
	
		亲我一下
		


		

	

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、代码实例

	
		
		
		
		
	
	
		
		

			我是哪吒
			我是云韵
		
		
	

4、浏览器展示

十、新星计划

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

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

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

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

活动结束后由社区博主进行评选，将根据博文进入热榜的次数、进入推荐流的次数、增粉数据、综合博文数据等指标进行评选，每个社区评选10位优胜者（10*3），获得专属奖品。

这里是“新星计划·第二季”【Java】赛道的报名入口！


1、Java从入门到项目实战
2、SQL从入门到精通
3、手把手教你学Linux
4、Python从入门到项目实战

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

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

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