`

javascript获取css盒子模型的一些值

javascript 
阅读更多

首先无法用style属性来获取任意元素的的css信息.style属性只有显式设置后才能获取值.

有效获取的方法如下:

 

 

var ID=document.getElementById("id");

 

盒子外层坐上顶点的绝对坐标.相当于margin

ID.offsetLeft

ID.offsetTop

 

盒子外层宽度与高度

ID.offsetWidth

ID.offsetHeight

 

盒子内层坐上顶点相对于外层左上顶点的绝对坐标,相当于border-left的值和border-top的值

ID.clientLeft

ID.clientTop

 

盒子内层的宽度与高度

ID.clientWidth

ID.clientHeight

分享到：
| 递归调用时注意对于有返回值的函数要return
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    boxmodel:CSS盒模型编辑器界面构建器输入试用

    BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...

    div盒子模型，方便的盒子插件

    需引入必要文件box2.js和box2.css； jquery版本在1.4以上 2、添加方法 在html中添加class为.box2的div即可； 3、属性介绍 控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> panerTitle...

    前端开发三件套HTML&CSS&JavaScript

    5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM 4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局

    CSS样式-JavaScript笔记.pdf

    1. 能够使用CSS的基本选择器选择元素 ...3. 能够说出盒子模型的属性 4. 能够说出JS中五种数据类型 5. 能够使用JS中常用的运算符 6. 能够使用JS中的流程控制语句 7. 能够在JS中定义命名函数和匿名函数

    韩顺平轻松搞定网页设计(html.css.js)(完整版)

    2、css(块级元素、行内元素、标准流盒子模型、浮动定位)； 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局)； 4、javascript深入讲解(js基本语法、数组、js面向对象编程，js系统函数、事件、js dom编程详解...

    韩顺平html+css笔记

    2、css(块级元素、行内元素、标准流盒子模型、浮动定位)； 3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局)； 4、javascript深入讲解(js基本语法、数组、js面向对象编程，js系统函数、事件、js dom

    展开盒子模型-探索CSS 3D变换的交互式幻灯片-JavaScript开发

    展开盒子模型探索CSS 3D变换的交互式幻灯片。 按向左或向右箭头键前进。 全屏观看以获得最佳效果。 在此演示文稿中修改或重复使用CSS生成。u展开框模型探索CSS 3D变换的交互式幻灯片。 按向左或向右箭头键前进。 ...

    CSS选择符与盒模型

    css选择符与盒模型，伪类，选择符分类，盒子模型

    《精通Javascript+jQuery》光盘源码

    　4.2　盒子模型 　4.3　元素的定位 　4.3.1　float定位 　4.3.2　position定位 　4.3.3　z-index空间位置 　4.4　CSS排版观念 　4.4.1　将页面用div分块 　4.4.2　设计各块的位置 　4.4.3　用CSS定位 　4.5　排版...

    《精通CSS+DIV网页样式与布局》光盘源码

    　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的版式 　...

    精通CSS+DIV网页样式与布局视频教材

    10.2.1　盒子模型的概念 10.2.2　border 10.2.3　padding 10.2.4　margin 10.3　元素的定位 10.3.1　float定位 10.3.2　position定位 10.3.3　z-index空间位置 10.4　定位实例一：轻轻松松给图片...

    JavaScript王者归来part.1 总数2

    　14.2 JavaScript与CSS　 　14.2.1 CSS和DOM的关系　 　14.2.2 CSS和IE的关系　 　14.2.3 浏览器的CSS兼容性　 　14.3 控制CSS改变页面风格　 　14.3.1 实现结构与表现的分离及其范例　 　14.3.2 使用JwaScript和...

    css-box-model:获取有关Element的准确且名称明确CSS Box模型信息:package:

    每当您使用您可能都想考虑使用css-box-model来获取更详细的盒子模型信息。用法 // @flowimport { getBox } from 'css-box-model' ;const el : HTMLElement = document . getElementById ( 'foo' ) ;const box : Box...

    精通CSS.DIV.网页样式与布局 源码

    　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的...

    精通CSS+DIV网页样式与布局

    　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的版式 　...

    java雷电源码-study-part2-part3:前端入门HTML、CSS（重点：布局原则、盒子模型、弹性盒子）、JavaScript基础

    基础的前端Part2：HTML、CSS（重点：布局原则、盒子模型、弹性盒子）； 基础的前端Part2：JavaScript基础、面向对象、模块化思想、原生Ajax； 前端进阶的Part2：ES6组件化、面向对象、继承、异步编程以及其它特性； ...

    JavaScript 盒模型 尺寸深入理解

    概念 引自维基百科：根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定...理解盒模型，不管是对于设置一个元素外边据、边框、内边距，高宽CSS样式的准确应用，还是对于使用JavaScript去计算盒子的宽度、

    web开发基础教程

    其中包括：第一章 HTML基础 第二章 HTML基础(2).ppt 第三章 CSS样式表_语法规则 第四章 CSS样式表_样式控制 第五章 CSS样式表_盒子模型.ppt 第六章 CSS样式表_页面布局 第七章 Javascript基础语法 第八章 Javascript...

    精通JavaScript+jQuery Part1

    　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的版式 　...

Magicbox
Global site tag (gtag.js) - Google Analytics