转载记录下-jquery操作元素位置详解
?本文学习如何使用jQuery获取和操作元素的属性和CSS样式.
?转载地址：http://www.cnblogs.com/oneword/archive/2010/11/11/1874809.html
?对于下面这样一个标签元素:
alt='1' class="imgs"></img>?
我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性.
元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼.
值得注意的是:
1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称.
例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className
2.在JavaScript中,我们可以直接获取或设置Dom属性
在jQuery中,提供了attr函数来操作元素属性,具体如下:
函数名说明例子attr(name)取得第一个匹配元素的属性值.attr(property)将一个"名/值"形式的对象设置为所有匹配元素的属性});attr(key,value)为所有匹配的元素设置一个属性值attr(key,fn)为所有匹配的元素设置一个计算的属性值removeAttr(name)从所有匹配的元素中删除一个属性函数名说明例子val()获取第一个匹配元素的value值val(val)为匹配的元素设置value值html()获取第一个匹配元素的html内容html(val)设置每一个匹配的元素的html内容text()取得所有匹配文本节点的内容,并将其连接起来text(val)将所有匹配元素的置为val函数名说明例子addClass(classes)为每个匹配的元素添加指定的类名hasClass(class)判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回trueremoveClass([classes])从匹配元素中移除所有或指定的css类toggleClass(classes)如果存在(不存在)就删除(添加)指定类toggleClass(classes,switch)当switch是true时,添加类,switch为false时,删除类函数名说明例子css(name)访问第一个匹配元素的样式属性css(properties)把一个"名/值"对设置给所有匹配元素的样式属性css(name,value)为匹配的元素设置同一个样式属性
如果是数字,将自动转换为像素值示例生成的源码id="txt1" />
注意:
对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性.
1.宽、高相关
函数名说明例子width()获取第一个匹配元素的宽度,默认为pxwidth(val)为匹配的元素设置宽度值,默认为pxheight()获取第一个匹配元素的高度,默认为pxheight(val)为匹配的元素设置宽度值,默认为pxinnerWidth()获取第一个匹配元素内部区域宽度(包括padding,不包括border)innerHeight()获取第一个匹配元素内部区域高度(包括padding,不包括border)outerWidth([margin])获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括outerHeight([margin])获取第一个匹配元素外部区域高度(包括padding,border)
margin为true则包括margin,否则不包括
2.位置相关
在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.
函数名说明例子offset()获取匹配元素在当前窗口的相对偏移
只对可见元素有效 position()获取匹配元素相对父元素的偏移
只对可见元素有效 scrollTop()获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效 scrollTop(val)设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效 scrollLeft()获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效 scrollLeft(val)设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效 $("div").scrollLeft(200)
注意:
offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移
?
