JavaScript中的一些定位属性[图解]
有这张图就够了,简单地说明一下
以Height为例,Width同理:
div.clientHeight:可见窗口除去了margin+border之后的长度。
div.offsetHeight:在div.clientHeight的基础上加了border和滚动条的长度。
div.scrollHeight:就是元素内容的实际高度。
以Top为例,Left同理:
div.clientTop:margin之后padding之前的长度值。
div.offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
div.scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,即是在出现了纵向滚动条的情况下,滚动条拉动的距离。
关于offsetParent,不同的浏览器有不同的实现算法,有一种常见布局在各种浏览器中 offsetParent 是一样的,那就是:外层元素 div 的 position 计算值是 relative、absolute 时,内层元素 div 的 offsetParent 总是外层元素 div。
相关推荐
-
JavaScript中的一些定位属性[图解]
有这张图就够了,简单地说明一下 以Height为例,Width同理: div.clientHeight:可见窗口除去了margin+border之后的长度. div.offsetHeight:在div.clientHeight的基础上加了border和滚动条的长度. div.scrollHeight:就是元素内容的实际高度. 以Top为例,Left同理: div.clientTop:margin之后padding之前的长度值. div.offsetTop:该元素的上border的上边缘 到 该元
-
JavaScript中访问id对象 属性的方式访问属性(实例代码)
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
JavaScript中关联原型链属性特性
数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable 表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循环返回属性是否可以枚举. configuralbe 表示是否能过来delete删除属性从来重新定义属性,能否修改其配置. value 包含这个属性的数据值.读取属性值的时候,从这个位置读取. 写入属性值的时候,把新值保存在这个位置.这个特性的默认值为true. <script> function F
-
javascript中自定义对象的属性方法分享
首先介绍下关联数组: 复制代码 代码如下: <script> var test=new Object(); test["a"]=1; test["b"]="string"; test["c"]=false; alert(test["a"]); </script> 执行上面的代码,显示1.在javascript中,方法和属性一样当做值来看待. 复制代码 代码如下: <script
-
Javascript中函数名.length属性用法分析(对比arguments.length)
本文实例分析了Javascript中函数名.length属性用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
javascript中innerText和innerHTML属性用法实例分析
本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
ES6 javascript中class静态方法、属性与实例属性用法示例
本文实例讲述了ES6 javascript中class静态方法.属性与实例属性用法.分享给大家供大家参考,具体如下: 类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承. 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为" 静态方法". class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo
-
JavaScript中的noscript元素属性位置及作用介绍
一.<script>元素属性 向XHTML页面中插入JavaScript的主要方法,就是使用<script>元素,该元素有5个属性分别为charset.defer.language.src.type,经常使用的是type.src.defer这三个. 1.type属性的值一般都是text/javascript,该属性是必须的,<script type="text/javascript"/>. 2.src属性的值是*.js外部文件,该属性是可选的,<
-
JavaScript中Window对象的属性及事件
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. windows对象属性 属性 描述 closed 返回窗口是否已被关闭. defaultStatus 设置或返回窗口状态栏中的默认文本. document 对 Document 对象的只读引用.请
-
JavaScript中的style.display属性操作
display版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:无 语法: display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-
随机推荐
- 解决ASP中http状态跳转返回错误页的问题
- Angular企业级开发——MVC之控制器详解
- Nginx服务器初期基本配置指南
- 基于java涉及父子类的异常详解
- JavaScript第一篇之实现按钮全选、功能
- JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
- ASP.NET 2.0 中的创建母版页
- PHP+Mysql无刷新问答评论系统(源码)
- javascript splice数组简单操作
- 谈谈因Vue.js引发关于getter和setter的思考
- js排序与重组的实例讲解
- iOS的UIColor类与其相关类之间的区别及判断相等的方法
- 让你的python代码更加pythonic(简练、明确、优雅)
- jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
- 仅用[]()+!等符号就足以实现几乎任意Javascript代码
- React学习笔记之事件处理(二)
- Flex 和JavaScript 交互(带参)
- Python正则表达式经典入门教程
- Python实现周期性抓取网页内容的方法
- 解析Javascript中大括号“{}”的多义性