js操作样式

DOM样式属性和方法:

指定的元素,它的style有这么几个属性和方法:

cssText:通过这个属性可以访问到元素的特性style设置的属性,并且可以直接赋值设置。

removeProperty(属性名称):从样式中删除给定属性。

setProperty(属性名称,值,权重):可以通过这个方法设置给定样式的同时设置其权重,可以传入”important”或者一个空字符串。

获取计算后样式:

window.getComputedStyle(需要获取样式的元素,伪元素字符串 ):这个方法返回计算后的样式。(在ie中不支持这个方法,但是它每一个元素都有一个currentStyle属性,返回的和这个方法一样的结果)


元素的属性:

offsetHeight:返回元素的高。包括元素的高度,水平滚动的高度,上下边框高度。

offsetWidth:返回元素的宽。包括元素的宽度,水平滚动的宽度,左右边宽宽度。

offsetLeft:返回元素左外边框至相对于最近已经定位的上级元素的左内边框之间的距离。

offsetTop:返回元素上外边框至相对于最近已经定位的上级元素的上内边框之间的距离,

clientWidth:返回元素的宽。包括元素内容区域,左右内边距宽度。

clientHeight:返回元素的高,包括元素内容区域,上下内边距高度。(用在documnet.body或者document.documentElement元素上(具体哪个元素看浏览器的模式,在ie混杂模式下使用的是body)可以计算出视口的高

滚动大小:

scrollHeight: 这个属性返回的是元素没有滚动条情况下的总高度。

scrollWidth:这个属性返回的是元素在没有滚动条情况下的总宽度。

scrollLeft:被隐藏在内容区域的左侧的宽度,给这个属性赋值,可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的高度。设置整个页面的滚动通过设置html元素也就是document.documentElement。要在页面加载完dom以后执行,不然没有效果。

元素相对于视口的位置:

getBoundingClientRect: 每个元素都有这个方法,它返回一个矩形对象,包含四个属性:bottom,top,left,right。这些属性的值都是元素相对于视口的位置。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,302评论 1 92
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,642评论 1 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,083评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,091评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,578评论 1 41

友情链接更多精彩内容