jquery操作元素的位置
.offset() 在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。 .offset() 这个不接受任何参数。 var offset = p.offset(); //获取到这个元素的位置 p.html( "left: " + offset.left + ", top: " + offset.top );
.offset.left 元素距左面的距离
.offset.top 元素距上面的距离 如果元素设置的是visibility:hidden; 可以获取到坐标, 如果元素设置的是 display:none; 位置值是 undefined; .offset(coordinates) coordinates 一个包含top 和 left 属性的对象,用整数指明元素的新顶部和左边坐标。 .offset(function(index,coords)) 返回用于设置坐标的函数。 $("p:last").offset({ top: 10, left: 30 }); 设置最后一个p元素的位置。
.offsetParent(); 取得离指定元素最近的含有定位信息的元素, css position 属性是 relative absolute, 或fixed。 .offsetParent() 这个元素不接受任何参数。 $('li.item-a').offsetParent().css('background-color', 'red'); .position() 获取到匹配元素中第一个元素的当前坐标 .position() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。包含 top 和 left 注,不支持获取隐藏元素的便宜的坐标 var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top ); .scrollLeft() 获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离。 .scrollLeft() 这个方法不接受任何参数。 $("p:last").text( "scrollLeft:" + p.scrollLeft() ); 获取p 元素的 横向滚动条距离。 .scrollLeft(value) 设置每一个匹配元素的水平滚动条的距离。 $("div.demo").scrollLeft(300); .scrollTop() 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。 .scrollTop() 这个方法不接受任何参数。 $("p:last").text( "scrollTop:" + p.scrollTop() ); 获取p 元素的垂直滚动条距离。 .scrollLeft(value) 设置每一个匹配元素的垂直滚动条的距离。 $("div.demo").scrollLeft(300);
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 黑暗中的YOLO:解决黑夜里的目标检测 | ECCV 2020
- Elasticsearch:Java 运用示例
- 【5分钟玩转Lighthouse】搭建个人云盘
- Elasticsearch:Index alias
- 编程神器来了!写代码、搜问题,全部都在「终端」完成!是时候入手了
- Array - 238. Product of Array Except Self
- Array - 209. Minimum Size Subarray Sum
- Array - 334. Increasing Triplet Subsequence
- Array - 123. Best Time to Buy and Sell Stock III
- Array - 122. Best Time to Buy and Sell Stock II
- Array - 121. Best Time to Buy and Sell Stock
- Array - 220. Contains Duplicate III
- Array - 219. Contains Duplicate II
- Array - 217. Contains Duplicate
- Array - 299. Bulls and Cows