【offsetLeft与style.left区别】的更多相关文章

offsetLeft与style.left区别

在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为relative;left: -10px;那么它的offsetLeft返回值是-10,而它的style.left还是为空,因为style.left只有行内设置的样式才有效: style.left:获取当前元素的行内样式的值: 区别在于: 1. style.left 返回的是字符串,如28px,offsetL…

offsetLeft与style.left的区别

参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值.如果所有父元素,子元素都没与设定定位,那么其offsetLeft是相…

offsetLeft,Left,clientLeft的区别

offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整…

JS中offsetLeft,Left,clientLeft的区别（纯转贴）

假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素. obj.offsetHeight 指 obj…

offsetLeft和style.left的区别

offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offset…

DOM中offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于:1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offset…

offsetleft 和 style.left 的区别

offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的: 二者的区别在于: 1.style.left返回的是字符串,如30px,offsetLeft返回的是数值30: 2.style.left是可读写…

obj.offsetHeight与obj.style.height区别

我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.offsetHeight可以获取写在样式文件里的属性值,而obj.style.height只能获取行内属性,在表现与结构分离的今天,这显然是不合适的   2.obj.offsetHeight返回的是一个数值,而obj.style.height返回的是一个字符串,单位是“px”   3.obj.offse…

ios UITableView的style的区别与用法，以及分割线的显示与隐藏

******************tableview style****************************************************** // tableview style不同的区别 1.style＝UITableViewStyleGrouped  默认会有headview和footview,头尾会空出一些距离,headview和footview会随tableview一起滑动, _saleTableView = [[UITableView alloc] i…

js中的offsetLeft和style.left

(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字符串(在内部样式和外部样式中指定left是无效的) (2)如果没有已经定位的父元素,那么offsetLeft指向的是文档(document)的左边缘 <!DOCTYPE html> <html lang="en"> <head> <meta cha…

offsetLeft 与 left的区别

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #demo { width: 100px; height: 100px; /*position: absolute;*/ background-color…

js中获取样式的俩种方法 style.color和style['color'] 区别

<!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="Content-…

getcomputedstyle和style的区别

1.只读与可写getComputedStyle方法是只读的,只能获取样式,不能设置:而element.style能读能写,能屈能伸.2.获取的对象范围getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来):而element.style只能获取元素style属性中的CSS样式.因此对于一个光秃秃的元素<p>,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192,…

JavaScript操作DOM的那些坑

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口 特性/方法 类型/返回类型 说 明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String…

JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的 匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetPa…

JavaScript 特效之四大家族（offset/scroll/client/event）

  三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以属性形式存在. 不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息.           1. offset 系列 offset:偏移.补偿.位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法.   (1) offsetWidth 和 offsetHeigh…

JavaScript动画：offset和匀速动画详解(含轮播图的实现)

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetParen…

js中对象的一些特性，JSON，scroll家族

一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSON Javascript Object Notation 即一种轻量级的数据交换格式,我们称之为js对象表示法;使用JSON进行数据传输的优势之一就是轻量,表示法就是流行的 键值对,Key:value. JSON的 结构: JSON值的获取: 点语法和中括号,推荐用点语法,可以不用在意属性的是否有引…

javaScript动画2 scroll家族

offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高. offset宽/高  =  盒子自身的宽/高+ padding +border: offsetWidth = width+padding+border: offsetHeight = Height+padding+border: offsetLeft和offsetTop  (检测距离父盒子有定…

offset家族基本简介

Offset家族简介 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent 共同组成了offset家族. offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高. of…

JS——offset

1.offsetWidth.offsetHeight返回盒子宽度和高度,包括padding与border,不包括margin 2.offsetLeft.offsetTop返回盒子距离定位盒子的x轴方向和y轴方向距离,如果没有定位盒子,则返回相对于body的距离 3.offsetParent返回距离定位盒子标签元素,如果没有定位盒子,则返回body标签元素 4.offsetLeft与style.left区别: (1)父盒子中无定位,offsetLeft可以返回距离body的距离,同样情况,styl…

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offsetX 先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说. pageX:鼠标指针距离文档X轴左侧边缘的距离,不随滚动条变化而变化 clientX:鼠标指针距离可视窗口左侧边缘的距离,随着滚动条变化而变化 screenY:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化…

dom.style.left 与 dom.offsetLeft区别

dom.style.left    初始空值,必须在html行内样式定义值才有值,在css样式定义仍为空值                         可读写,是字符串,读写是必须加px,否则无效                         js设置之后,有值 设置非整数值,会保持原样,例如 style.left = 8.22px, 输出style.left,仍然为8.22px dom.offsetLeft  初始有值,只读,不可写,是数字 通过style.left设置的非整数值,会四舍…

js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.bod…

javascript中无法通过div.style.left获取值的问题

一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTimeout ( function () { var div = document.getElementById("div4"); //var left = parseInt(div.style.left) + 5; var left = div.offsetLeft + 5; div.sty…

scrollLeft、offsetLeft、clientLeft、clientHeight详解

offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 scrollLeft.offsetLeft.clientLeft.clientHeight详解 scrollHeight: 获取对象的滚动高度,对象的实际高度: scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的…

JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth

1.offsetLeft和offsetTop 只读属性,返回当前元素与父辈元素之间的距离(不包括边框).其中父辈元素的取法是有门道的: (1).若父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素的距离. (2).若父辈元素中没有定位元素,那么就返回相对于body的距离. (3).若当前元素具有固定定位(position:fixed;),那么返回的是当前元素与可视窗口的距离. <div id="a" style="width:400px;height:400p…

offset，client，scroll，style相关笔记

1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读 注解:边缘:border以外 定位父元素:position为relative,absolute或fixed 内壁:border以内 1.1 style.top 功能:与offsetTop相同 使用方法:js document.querySelector(...).sty…

javaScript动画1 offsetWidth、offsetLeft

offsetWidth和offsetHeight <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>offsetWidth和offsetHeight</title> <style> div{ width: 100px; height: 100px; padding: 10px; border:…

第52天：offset家族、scroll家族和client家族的区别

一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offsetWidth = width + padding + border offsetHeight = height + padding + border 2.offsetLeft 和 offsetTop: 返回距离上级带有定位的盒子左边的位置,如果父级元素没有定位,则以body为准 offsetLeft…