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-
随机推荐
- 如何获知所有的Cookie?
- shell脚本实现同时多台远程主机执行命令的代码分享
- jqPaginator结合express实现分页展示内容效果第1/2页
- jquery悬浮提示框完整实例
- 正则表达式应用之提炼百度歌词的实现代码
- php使用pdo连接sqlserver示例分享
- js淡入淡出焦点图幻灯片效果代码分享
- 珊瑚虫IP库浅析
- 有关JavaScript的10个怪癖和秘密分享
- 详解Python的Django框架中的模版相关知识
- Python单元测试框架unittest简明使用实例
- 深入浅出学习python装饰器
- 优化mysql数据库的经验总结
- 基于mssql导mysql遇到的问题
- 详解iis连接数与限制的问题
- 你应该知道的21个Java核心技术
- 使用vue的v-for生成table并给table加上序号的实例代码
- JavaScript控制listbox列表框的项目上下移动的方法
- 不错的服务器变慢的两种非常规解决办法
- Android中的应用认领总结