首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用jQuery获得CSS位置百分比

要获取元素的CSS位置百分比,您可以使用jQuery的position()offset()方法。具体步骤如下:

  1. 使用position()方法获取元素相对于其父元素的staticrelativeabsolutefixed位置。
  2. 如果元素相对于其父元素的位置为static,则使用offset()方法获取元素的lefttop值。
  3. 计算元素的lefttop值相对于其父元素的位置百分比。

下面是一个示例代码:

代码语言:javascript
复制
// 获取元素的CSS位置百分比
var element = $('#my-element');
var positionPercentage = element.position();

// 计算元素相对于其父元素的位置百分比
var positionPercentage = {
  left: element.position().left / element.offsetParent().offsetWidth * 100,
  top: element.position().top / element.offsetParent().offsetHeight * 100
};

请注意,上述代码仅适用于具有相对或绝对位置的元素。如果您需要获取具有固定位置的元素的位置百分比,您可以使用fixed选择器来获取元素,例如:

代码语言:javascript
复制
var element = $('#my-fixed-element');
var positionPercentage = element.position();

在获取元素的位置百分比后,您可以使用这些值来计算元素在页面上的位置,或者将其与其他元素的位置百分比进行比较。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

页面滚动,元素跳动;附带jquery.scrollex.js插件

滚动到要实现动画的元素时(is-inactive): 其实和上面的意思一样: 在未滚动到该元素时,显示假位置。...当滚动到该元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...$(this).css('background-color', ''); } });}); 事件 jquery.scrollex.js插件支持以下一些事件。...$(this).css('opacity', Math.max(0, Math.min(1, progress))); } });}); · mode, top和bottom 元素在视口中的位置可以通过...top和bottom 通过top和bottom参数可以移动元素和视口的接触面积,可以使用像素值,百分比值,或视口的百分比值(如20vh)。正值向视口内部移动,负值向视口外部移动。

5.7K10

【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

一、需求分析及核心开发要点 ---- 要实现如下功能 , 下图 粉色 部分是 整体 父容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ; 首先分析父容器元素.../* 最外层 父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得..., 浮动可以在标准流上方浮动显示 , 但是不能覆盖到 内边距范围 ; 也不能使用 相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中..., 可以使用绝对定位在父容器的任意位置显示任何元素 ; /* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position.../* 最外层 父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得

1.3K10
  • 前端实战Demo:一张图片搞定一页布局

    当然,不止是省了一些切图的花费,也是一种很有效的前端开发方法,尤其是针对那些设计花哨,使用HTML和Css还原度较难,并且实际上也并没有那么多可操作元素的设计。      ...当然要使用Javascript设置,当input和按钮区域获得焦点时,显示input和button了。...其实操作方法也是一样的,只要注意调整好空的div的位置和宽高度与图片中的设计相吻合即可。   可能有人要问了,为什么要使用百分比来作为位置和宽高度的大小度量呢?这当然是一种响应式的设计。...如果使用像素的话,那么只能适用于一种屏幕宽高比和分辨率之下,使用百分比的话就可以在较多种类的屏幕特点之下仍然保持与设计的高还原度。   ...上述是使用了HTML元素的onfocus属性,其实也可以使用jQuery,代码如下: $("input#tel").focus(function(){ $("input#tel").css("display

    83830

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    ,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等...jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义边栏用的。...这个位置可以使用字符串(例如 “#element-id”,“bottom” 等)描述或者是一个数值(像素单位)。...原理就是这样的: 首先获取要修改滚动条样式的内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动条的效果。...然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。 明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS 对其进行定义了。

    14.2K30

    waypoint_使用jQuery Waypoint创建粘性导航标题

    这些也可以是元素宽度的百分比,这非常方便-这种方法允许边界半径自动适应框尺寸的变化。 使用::after伪元素创建完成导航栏功能区外观的小“阴影”。...它们的宽度和高度以及边界半径也使用百分比设置。...offset的值可以是数字(代表固定数量的像素),包含百分比的字符串(解释为视口高度的百分比)或返回多个像素的函数。 最后一个可以提供一些严重的灵活性,稍后我们将使用它。...所有这些都是标准的jQuery票价:在nav添加或删除sticky类后,我们便会使用.css()覆盖元素的垂直位置,然后使用.animate()其设置为应有的水平。...但是,这样做有一点副作用-由于代码在固定后有效地取代了导航元素的垂直位置,因此您top:15px从CSS中删除top:15px声明。

    3.4K30

    CSS-精灵图片的使用(从一张图片中截图指定位置图标)

    目录 一、名词解释 二、使用难点 三、使用步骤 四、程序源码 ---- 一、名词解释 在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。...二、使用难点 精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分,首先我们需要理解三个坐标:浏览器坐标、组件坐标、图片坐标,每个组件都有自己的坐标点,左上角为原点,往上y值为负数,...减小了100px(假设值),此时y坐标为-100px;往左移动24px,此时x坐标为-24px,所以如果我们需要获取vip6图标,图片相对于组件坐标往左移动24px和往上移动100px就能取到 三、使用步骤...1.我们需要用到CSS中两个与背景图片有关的属性 background-image: url(“图片地址”); background-position: x坐标 y坐标; 2...以及微博认证为例 3.创建三个div,宽高分别等于vip3和4以及微博认证大小,如vip3和4宽高都为16px,微博认证x及y坐标分别为95px 35px 创建三个div 指定宽高、背景图片、图标所在位置

    1.5K10

    第135天:移动端开发经验总结

    一、移动端三种布局   1、有最大、最小宽度的百分比自适应布局   适用场景:门户网站首页,图片较多的首页。   2、百分比自适应布局   适用场景:信息文字较多的网页,内容较多网页。   ...二 、Box-sizing在移动端的使用   在百分比定宽的页面经常使用。...那么,前端的应对方案是:   设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2   //例如图片宽高为:200px*200px,那么写法如下 .css{width...:100px;height:100px;background-size:100px 100px;}   其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px  .css{font-size...几乎一样,会jquery基本会zepto; 搭配 backbone underscore http://daneden.github.io/animate.css/ 动画css

    1.6K30

    分享一个基于jQuery的锁定表格行列的js脚本。

    网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。...好像看过园子里的司徒正美,写过一个用css锁定行列的,当时css比较烂看不懂,也没有保存那个网址(很后悔),现在想要找却又找不到了。   ...于是呢,就要jQuery动态创建div和需要的table,然后调整他们的宽度、高度和位置,这样在滚动的时候效率就高了很多,不过也有个问题,那就是精确获取、设置td的高度和宽度,要能够支持被撑高的td。...说了这么多,可能大家都烦了,说一下使用方法。   ...2、table的width不能设置百分比的形式,比如100%,这样很可能造成table被挤在div里面,没有横向的滚动。   对了,还要说一下缺点:   1、代码比较烂。

    3.4K60

    JavaWeb04-jQuery(Java真正的全栈开发)

    它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器。 jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。...获得jQuery对象,底层使用数组进行维护的,可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数:数组的下标,可以省略。如果省略下标获得dom 数组。...:disabled 不可使用 :checked 选中的元素(单选框和多选框) :selected 选中的元素(下拉选) 四.属性和样式 属性,类class,html代码/文本/值,css,位置,尺寸..."> css(name) 获得样式 css(name,value) 设置样式 css(pro) 使用json设置一组样式 5.位置 offset() 获得位置,返回json数据。...格式:{"top": xx , "left" : yy} offset(坐标) 设置位置 position() 获得相对父元素偏移 scrollTop([val]) 获得 或 设置 垂直滚动条的位置 scrollLeft

    2.3K90

    JavaScript进阶内容——jQuery

    $(选择器).action() jQuery使用顺序 jQuery是开源的JS文件代码,我们需要先获得其JS文件,才能够使用 在官网中下载jQuery的JS文件,或者复制其代码,自定义一个jQuery代码...入口函数 jQuery的使用位置和JavaScript的使用位置一样,都是在script中进行,同样存放在body底部 $(function(){ ......jQuery对象和DOM对象是两种完全不同的对象: 用原生JS获得来的对象就是DOM对象 用jQuery获得来的对象就是jQuery对象 jQuery对象的本质是: 利用$对DOM对象包装后产生的对象(...jQuery并没有封装,所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用 代码展示: <!...(''); // 这里获得值 $('').html(); // 这里设置值 $('').html(''); CSS操作: $('').css('',''); $('').css({'':'','':''

    5.5K10

    【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 百分比值 像素值 设置旋转中心点 )

    ; x y 坐标的 默认值 是 中心点 , 也就是 ( 50% , 50% ) ; x y 坐标的值 , 可以设置的类型 如下 : 百分比 : 50% 像素 : 10px 方位名词 : 可以是 top...- 使用 transfrom-origin 设置旋转中心点 ---- 1、代码示例 - 使用方位词设置旋转中心点 使用方位词设置旋转中心点 , 设置 左下角 为 旋转中心点 ; 设置 左下角为旋转中心点...> 执行结果 : 鼠标移动上去后的效果 : 绕左下角 逆时针 旋转 45 度 ; 2、代码示例 - 使用百分比设置旋转中心点...使用方位词设置旋转中心点 , 设置 25% 25% 为 旋转中心点 ; 设置 25% 25% 位置为旋转中心点 ; /* 设置旋转中心点 */ transform-origin...逆时针 旋转 45 度 ; 3、代码示例 - 使用像素值设置旋转中心点 使用方位词设置旋转中心点 , 设置 0px 0px 位置 为 旋转中心点 ; 设置 0px 0px 位置为旋转中心点 ;

    1K20

    WEB入门之十五 属性和样式

    本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。...这是因为在使用attr函数获得checked属性的值时,如果复选框处于选中状态,则获得true;如果复选框处于未选中状态,则获得undefined,并非false。...offset函数获得了含有广告图片的div的具体位置,并通过scrollTop和scrollLeft函数获得了滚动条的偏移位置,通过简单计算即可实现跟随滚动条滚动的广告图片 如果需要通过offset函数设置元素的具体位置...> 上述代码使用height和width函数分别获取到了页面的尺寸和广告div的尺寸,通过简单的计算可以得到居中位置 6.1 jQuery工具函数 jQuery提供了很多有用的工具函数来处理一些业务,这些函数都非常实用...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

    6010

    WEB入门之十五 属性和样式

    本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。 ​...这是因为在使用attr函数获得checked属性的值时,如果复选框处于选中状态,则获得true;如果复选框处于未选中状态,则获得undefined,并非false。...offset函数获得了含有广告图片的div的具体位置,并通过scrollTop和scrollLeft函数获得了滚动条的偏移位置,通过简单计算即可实现跟随滚动条滚动的广告图片 如果需要通过offset函数设置元素的具体位置...} ) 上述代码使用height和width函数分别获取到了页面的尺寸和广告div的尺寸,通过简单的计算可以得到居中位置 6.1 jQuery工具函数 jQuery提供了很多有用的工具函数来处理一些业务...本章将学习如何使用jQuery进行标签属性和CSS样式操作,jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

    9310

    由重构进阶前端开发入门 (二) 事件与事件对象

    常用 jQuery API 选择元素和创建元素使用 $(), find, filter 处理事件使用 on, off, trigger 操作元素内容使用 text, html 操作元素位置和尺寸使用 offset..., width, height 操作元素属性/特性使用 prop, attr, removeProp, removeAttr 操作元素样式/className 时使用 css, addClass, removeClass...例子:幻灯片切换效果(点击位置判断) 过去对于用户点击图片区域判断,需要通过 img 元素的 usemap 属性实现,使用方式较为复杂,且限制较多,可复用性低。...点击坐标 - 列表坐标,再除以列表宽度,即可得到点击相对列表的横向位置百分比 var px = (clickPos.left - listPos.left) / listWidth;...有兴趣的同学课余可以尝试一下,使用原生 JS 兼容 IE8 和现代浏览器后,再对比上述代码,就能明白 jQuery 的强大之处了~ 附:可用的跨浏览器兼容的 jQuery 标准化事件属性 jQuery

    1.6K10
    领券