美文网首页
js操作样式

js操作样式

作者: 郝加升 | 来源:发表于2018-10-10 16:07 被阅读0次

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。这些属性的值都是元素相对于视口的位置。

相关文章

  • js操作页面三步骤

    js操作页面三步骤 js事件 鼠标事件 文档事件 键盘事件 表单事件 事件对象 js操作内容 js操作样式 页面转...

  • js操作样式

    DOM样式属性和方法: 指定的元素,它的style有这么几个属性和方法: cssText:通过这个属性可以访问到元...

  • js操作样式

    一,内嵌样式: 此时style属性可以操作,可以通过 ele.style.arr 方式获取并修改样式。 注意: ...

  • js操作样式

    CSS HTML 笔记

  • 四、样式的获取

    1、 修改标签的属性 js操作的是行内样式。 js里写样式的时候,遇到了复合样式,要使用驼峰命名。 2、驼峰命名 ...

  • 点击菜单向(四周展开

    点击菜单向(四周展开) 通过css样式中添加一个类名,在js中操作这个类名,如果在js中操作样式就很麻烦!

  • 028 DOM

    DOM 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建标签 2、设置标签样式文本 ...

  • web自动化_dom

    js不能直接操作html元素,比如要修改元素的样式,需要通过dom对象操作html元素js ->dom对象->调用...

  • 操作各种样式及标签属性

    一.操作各种样式 js是不能修改外部的css文件的,只能操作内部和行内的样式 1.合法操作元素的标签属性(直接点"...

  • 04-第四章 操作元素属性 CSS样式[ ]的使用

    一 、cssStyle 操作 1、css样式赋值 (1)如果想通过js来设置样式的话,可以使用cssTextcss...

网友评论

      本文标题:js操作样式

      本文链接:https://www.haomeiwen.com/subject/jbayaftx.html