jquer属性 offset、position、scrollTop
jQuery(function(){
//获取宽度
$("button").eq().click(function(){
和js offsetWidth 不一样
alert( $("div").width())
});
//设置宽度
$("button").eq().click(function(){
$("div").width()
})
//获取高度
$("button").eq().click(function(){
alert( $("div").width())
});
//设置高度
$("button").eq().click(function(){
$("div").width()
});
})
//offset().top 获取对象距离页面顶部/左边的距离 和定位没关系
$("button").eq().click(function(){
alert($(".box2").offset().top)
}); // 无用,只能获取值 不能赋值
$("button").eq().click(function(){
$(".box2").offset().top=
})
}
2、position(). left/top 距离最近的定位父级元素的上边距 左边距
//position().top 距离定位的父盒子上边距 / 左边距
// 不包含margin padding 就的定位的距离
$("button").eq().click(function(){
alert($(".box2").position().top)
});
3、scrollTop/left 被卷曲的头部高度
<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
$("button").eq().click(function(){ alert($(".box1").scrollTop()) }) //获取头部卷上去的高度
<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
//复制,让滚动到指定的位置
$("button").eq().click(function(){ $(document).scrollTop() })
jquer属性 offset、position、scrollTop的更多相关文章
- pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y
event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...
- offset() position() scrollTop() scrollLeft()
(1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- CSS属性之position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...
- CALayer属性:position和anchorPoint
一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设 ...
- 系列属性(offset、scroll、client)
一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...
- ☀【offset() / position()】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
随机推荐
- Entity framework 意外删除了表,如何在不影响其它表的情况下恢复回来
关于EntityFramework数据迁移原理 查询数据库的表"__MigrationHistory",遍历代码库的Migrations文件夹下的所有文件,如果文件不在__Migr ...
- liunx mkisofs 命令的使用(制作iso)
参考的博客 http://www.cnblogs.com/darkknightzh/p/8564483.html 有很多时候需要在liunx 环境中将文件打成 iso 所有很多时候就会用到这个命令(m ...
- TCP三次握手过程中涉及的队列知识的学习
先上一张图 (图片来源:http://www.cnxct.com/something-about-phpfpm-s-backlog/) 如上图所示,这里有两个队列:syns queue(半连接队列): ...
- InnoDB引擎中的索引与算法9
5.1 InnoDB支持以下几种常见的索引: B+树索引 全文索引 哈希索引(自适应哈希索引) 关于哈希索引的说明: -- 1.InnoDB的哈希索引是自适应的,其根据表的使用情况自动生成哈希索引,不 ...
- 文本三剑客之grep及正则表达式
1.grep 1. 什么是grep.egrep和fgrep Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来(匹配到的标红).grep全称是Glo ...
- python获取字符串的前几个字符(包含汉字)
一个简单的字符串,比如a="小明xiaoming"或者b="小xiao明ming".想在只想得到字符串的前4个元素,a1="小明xi",b= ...
- vs2010 glfw glew glad glm 配置
OpenGL: Configuring GLFW and GLEW in Visual C++ Express Posted by Dimitri | Aug 14th, 2013 | Filed u ...
- Jmeter练习
首页 新随笔 管理 Jmeter接口测试实例-牛刀小试 本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口 ...
- socket 实现一个类似简单聊天室的功能(多客户端互相通信)
server端: #coding=utf-8 ''' 一个广播程序,linux运行 ''' import select,socket import traceback def broadcast(co ...
- 2018web前端面试题总结
web面试题 css面试 一.css盒模型 css中的盒子模型包括IE盒子模型和标准的W3C盒子模型.border-sizing: border-box, inherit, content-box ...