`
youngxu
  • 浏览: 165385 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery中得到Element真实top、left、height和width属性值的对象

阅读更多
在一个电子商务网站的实施过程中,发现使用的JQuery1.3.2获得Element的实际的top、left、height和width时,对于IE浏览器和Chrome需要使用不同的代码来得到。为了便于统一使用,我 自己写了一个对象,在这里记录下来,以备将来参考。
JQuery的版本为1.3.2
该对象的代码如下:
var isIE = $.browser.msie;
function JQElement(){
	this.obj;
	this.top;
	this.left;
	this.height;
	this.width;
	
	this.getE = function(objid) {
		if(isIE){
			this.obj = document.getElementById(objid);			
			this.top = this.obj.offsetTop;
			this.left = this.obj.offsetLeft;
			this.height = this.obj.offsetHeight;
			this.width = this.obj.offsetWidth;
		}else{
			this.obj = $("#" + objid);
			this.top = this.obj.offset().top;
			this.left = this.obj.offset().left;
			this.height = this.obj.height();
			this.wight = this.obj.width();	
		}
		
		return this;
	}
}


调用该对象的代码为:
var $searchdiv = new JQElement().getE("search_div");
var searchtop = $searchdiv.top;
var searchleft = $searchdiv.left;
var searchwidth = $searchdiv.width;
var searchheight = $searchdiv.height;
delete $searchdiv;


通过该对象的编写,在使用JQuery获得div元素的实际位置时,代码量减少了不少。同时对于JQuery在其他的浏览器出现可能的问题时,修改起来也会更加方便。
分享到:
评论

相关推荐

    jqueryapi1.4参考手册

    9. **属性和尺寸操作**:`$(element).attr("attribute")`获取属性值,`$(element).attr("attribute", value)`设置属性值;`$(element).width()`和`$(element).height()`分别获取元素的宽度和高度。 10. **数组和...

    [原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

    - **设置值用法**:当`.offset()`方法被用于设置值时,可以传递一个对象参数,包含`left`和`top`属性,或者使用一个函数返回这个对象。需要注意的是,`.offset()`只能应用于可见元素,并且在设置值时,该元素不能是`...

    jQuery详细教程

    $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数...

    jquery图片滑动排列 jquery图片滑动排列代码下载.zip

    3. **jQuery动画**:jQuery的`animate()`函数是实现动态效果的关键,可以平滑地改变一个或多个CSS属性值,如left、top、width和height,从而实现图片的滑动效果。 4. **CSS布局**:在图片滑动排列中,CSS布局扮演着...

    jquery滑动门控

    3. **CSS样式操作(CSS Manipulation)**:滑动门控的效果通常需要通过修改元素的CSS属性,如`width`、`height`、`left`或`top`来实现。jQuery提供了便捷的方法,如`css()`函数,用于设置或获取元素的样式。 4. **...

    jQuery鼠标移动图片遮罩显示名字特效源码.zip

    这个例子中,我们通过jQuery的`data()`方法获取图片的`data-name`属性值,然后在鼠标移入图片时显示名字,移出时隐藏名字。同时,通过CSS的`transition`属性实现遮罩层和名字元素的平滑过渡效果。 在实际项目中,你...

    jQuery实现带缩略图的移动端幻灯片效果源码.zip

    jQuery的`.animate()`方法是创建平滑过渡的关键,它可以改变各种CSS属性,如`width`, `height`, `left`, `top`等,从而实现平滑的滑动效果。在移动端幻灯片,我们可以使用`.animate()`实现图片的滑入滑出。 5. **...

    jQuery实现注册和登录弹出层效果.zip

    jQuery提供了多种方法来获取和检查表单字段的值,如`val()`、`is(":empty")`、`isNaN()`等。 ```javascript $("#registerForm").submit(function(event) { event.preventDefault(); // 阻止默认的表单提交行为 ...

    JS+CSS实现矩形对象的圆角效果

    如果你只想改变特定的角,可以分别指定每个角的半径,如`border-top-left-radius`,`border-top-right-radius`,`border-bottom-left-radius`和`border-bottom-right-radius`。 然而,有些老版本的浏览器可能不支持...

    Packt.jQuery.1.4.Animation.Techniques.2011

    可以使用`transform`和`translate`来平移元素,而不是改变`left`和`top`属性。 ##### 5. 实战案例分析 - **示例1:淡入淡出效果**:使用`fadeIn()`和`fadeOut()`方法来实现元素的淡入淡出效果。 ```javascript $...

    jquery计算鼠标和指定元素之间距离的方法

    代码中对于元素中心点的计算使用了 `elem.offset().left + (elem.width() / 2)` 和 `elem.offset().top + (elem.height() / 2)`,这样做是为了从元素的左上角偏移量中,分别加上宽度和高度的一半,从而得到元素的...

    css3教程应用css3 圆角border-radius属性制作...

    在CSS3中,`border-radius`属性是一个非常重要的特性,它允许我们为元素的边框创建圆角效果,使得设计更加美观和现代化。这个特性在网页设计中被广泛应用,可以替代传统的图片切角方法,提高网页加载速度并优化用户...

    jQuery javascript获得网页的高度与宽度的实现代码

    `offset()` 返回一个对象,包含 `top` 和 `left` 属性,分别表示元素的顶部和左侧距离文档顶部和左侧的距离。若需获取相对于特定祖先元素的偏移,可以传入 `options` 参数进行定制: ```javascript var ...

    jquery样式操作

    这些只是jQuery在样式操作方面的一部分功能,实际使用中,开发者可以根据需求结合其他方法和属性,创造出更多动态和交互性的网页效果。在实际项目中,熟练掌握这些技巧能大大提高开发效率,同时让网页的视觉表现力更...

    通过jquery实现页面的动画效果(实例代码)

    - `{params}`:一个对象,定义了元素在动画结束后应具有的CSS属性值。可以是任意有效的CSS样式属性,如`left`、`opacity`、`height`、`width`等。 - `speed`:动画执行的速度,可选参数,可以是毫秒(如`1000`代表1...

    JQuery基础.docx

    - `[name='value']`:选择具有特定属性和属性值的元素。 ```javascript $("[name='email']").css("border", "1px solid red"); ``` 6. **子元素过滤器** - `:nth-child(index)`:选择父元素下的特定索引位置的...

    jQuery 中关于CSS操作部分使用说明

    ### jQuery 中关于CSS操作部分使用说明 #### 一、引言 在Web开发领域,jQuery 是一个非常流行的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。jQuery中的CSS操作功能是其核心特性...

    css3实现圆角矩形

    在网页设计中,CSS3(层叠样式表第三版)引入了许多新的特性和功能,其中一项就是能够方便地创建圆角矩形。标题"css3实现圆角矩形"所指的就是利用CSS3的`border-radius`属性来设计带有圆角的矩形元素,这个特性极大...

    Css3圆角边框

    除了基本的`border-radius`属性,还可以通过`border-top-left-radius`、`border-top-right-radius`、`border-bottom-left-radius`和`border-bottom-right-radius`分别设置不同角落的半径,以实现更复杂的形状。...

Global site tag (gtag.js) - Google Analytics