div的offsetLeft与style.left区别

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口。

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。offsetLeft则仍然能够取到，无需事先定义div的位置。

以上就是div的offsetLeft与style.left区别的资料整理，后续继续补充相关资料，谢谢大家对本站的支持!

赞 (0)

相关推荐

  • js 动态添加元素(div、li、img等)及设置属性的方法

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解. 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div.li.img 这样的标签.其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始. 一.js 动态添加元素div <div id="parent"

  • 基于Ajax+div的“左边菜单、右边内容”页面效果实现

    基于Ajax+div的“左边菜单、右边内容”页面效果实现

    效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订单管理 标签下的 产品列表.订单列表 时,右侧内容会相应的刷新为产品列表页(productList.jsp).订单列表页(recordList.jsp)的内容 这样就使用Ajax+div实现了左边菜单选择,右边内容显示的效果,下面就来看看具体的实现过程吧 一: 整个演示用的示例程序包含默认页面(in

  • jQuery实现将div中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

  • JS获取一个未知DIV高度的方法

    本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如: var height = element.clientHeight; 这种做法的局限: 1. 如果元素的display属性设置为none, 那么得到的结果为0 2. 在safari浏览器中,需要使用:element.offsetHeight得到实际高度,这是safari浏览器的bug 下面是Prototype提供的方法,能够兼容各种浏览器,同时在元素隐

  • Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

    Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!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>

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • div的offsetLeft与style.left区别

    clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标. 客户区指的是当前窗口. 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style

  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

    定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval()被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 提示: 1000 毫秒= 1 秒. 语法 setInterval(code,millisec,lang) 参数 描述 code 必需.要调用的函数或要执行的代码串. millisec 必须.周期

  • JavaScript中style.left与offsetLeft的使用及区别详解

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. s

  • Div CSS absolute与relative的区别小结

    详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!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>

  • Div  CSS absolute与relative的区别小结

    详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!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>

  • JavaScript 拖拽实例代码

    JavaScript 拖拽实例代码

    一.JS 拖拽的实现实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow:hidden; } body, div, { margin:0; pad

  • JS中offset和匀速动画详解

    offset简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetParent 下面分别介绍. 1.offsetWidth 和 offsetHight 用于检测盒子自身的宽高+padding+border

  • JavaScript中无法通过div.style.left获取值的解决方法

    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

  • JAVASCRIPT style 中visibility和display之间的区别

    当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置. --------------------------------------------------------------- 例子: 复制代码 代码如下: <script language="JavaScript"> function toggleVisibility(me){ if (me.style.visibility=="hidde

  • 浅析offsetLeft,Left,clientLeft之间的区别

    浅析offsetLeft,Left,clientLeft之间的区别

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

随机推荐