DOM盒子模型
获取行间样式
style.height //获取行间样式高度
xx.currentStyle.height //计算后的样式高度 IE低版本
getComputedStyle().height //获取计算后的样式高度(不支持padding) 谷歌高版本(只可读不可改)
设置行间属性
设置自定义属性
xx.setAttribute('index','i'); //属性名,属性值 获取自定义属性
xx.getAttribute('index');//得到属性值 删除自定义属性
xx.removeAttribute('index');
client系列(可视区域)
clientWidth、clientHeight //获取可视区域的宽高(支持padding,不支持border)
clientLeft//获取元素边框的左边框宽度
clientTop//获取元素边框的上边框宽度
offset系列(偏移量)
使用时候要有定位,而且设置初始值;如果没有父级定位会跟着父级走
offsetWidth/offsetHeight //获取容器宽高(在client的基础上,支持border)
offsetLeft //获取当前元素的左外边框到定位的父级左内边框的距离
//如果没有定位父级或者祖先级,那么就应该跟html走
offsetTop //指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框)
offsetaParent //定位父级
//(在没有任何定位的情况下它走的是body(在chrome中实测是走html))
scroll系列(滚动)
scrollWidth/scrollHeight //获取元素本身的宽高 (被内容撑开的尺寸,不管加不加固定尺寸,都会获取出来)
scrolltop //获取或设置一个元素的内容垂直滚动的像素数
scrollLeft //获取或设置一个元素的内容水平滚动的像素数
getBoundingClientRect() 获取元素位置
- 获得页面中某个元素的左,上,右,下分别相对浏览器视窗的位置
- 指DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)
- 返回一个object对象
- 有left,top.right,bottom,width,height六个值
var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离 alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离 alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
DOM盒子模型的更多相关文章
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- DOM盒子模型常用属性client,offset和scroll
JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS 设计彻底研究(三)深入理解盒子模型
第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...
- js盒子模型
1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
- (6)css盒子模型(基础下)
一.理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着. html与DOM的关系 详情了解“DOM” :ht ...
随机推荐
- RAID 磁盘阵列说明
Copy From wiki RAID档次 最少硬盘 最大容错 可用容量 读取性能 写入性能 安全性 目的 应用产业 单一硬盘 (引用) 0 1 1 1 无 JBOD 1 0 n 1 1 无( ...
- select、poll、epoll之间的区别总结[整理]【转】
转自:http://www.cnblogs.com/Anker/p/3265058.html select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符 ...
- 使用DataContext和ItemsSource将数据源绑定到ListView上的区别
在最近的一个项目中,将DataView类型的数据源绑定到ListView控件时,发现当DataView的内容发生变化时,前台的ListView控件的内容并没有发生改变,在这里我先贴出前台要绑定数据源的 ...
- mvc 中英文切换
我常用的2个方案,其实性质是一样的 方案1,使用过滤器 ActionFilterAttribute,这个就不细说了,比较方便. 实现一个继承自ActionFilterAttribute的类,实现OnA ...
- 沉迷Link-Cut tree无法自拔之:[BZOJ2049]洞穴勘探(蒟蒻的LCT板子)
来自蒟蒻 \(Hero \_of \_Someone\) 的 \(LCT\) 学习笔记 最近学了一波 \(LCT\) , 于是怒刷 \(LCT\) 合集...... $ $ 学的时候借鉴了 Clove ...
- [算法进阶0x10]基本数据结构A作业总结
在线题目\(oj\)评测地址:https://xoj.red/contests/show/1237 T1-Editor(hdu4699) 题目描述 维护一个整数序列的编辑器,有以下5种操作,操作总数不 ...
- A1032. Sharing
To store English words, one method is to use linked lists and store a word letter by letter. To save ...
- .net跨防火墙链接oracle连接池链接长时间无通讯数据被断开后报错问题解决
环境: .net 4.0以上使用Oracle.ManagedDataAccess组件链接oracle数据库,应用程序与数据库之间存在硬件防火墙. 症状:应用程序启动后正常访问,如果出现长时间无数据库请 ...
- 前端基础之html(一)
https://www.cnblogs.com/haiyan123/p/7516060.html 一.初始html 1.web服务本质 import socket sock=socket.socket ...
- 线程池之ThreadPoolExecutor
所属包: java.util.concurrent.ThreadPoolExecutor 类关系: public class ThreadPoolExecutor extends AbstractEx ...