getEle()

最新推荐文章于 2020-04-07 10:29:38 发布

原创最新推荐文章于 2020-04-07 10:29:38 发布 · 768 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #UP #HTML

ExtJs 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了DOM操作的各种方法，包括元素的位置设置、样式属性调整、事件监听等，为开发者提供了全面的DOM操作技巧。

位置设置：

getX()   取得相对于页面的x坐标
getY()   取得相对于页面的y坐标
getXY()　取得相对于页面的x,y坐标，用法：ele.getXY()[0]/[1]
getOffsetsTo(el) 取得相对元素el的坐标，返回值[x,y]
setX(x,animate)   设相对于页面的x坐标,animate为true则开启默认动画效果
setY(y,animate)　　同上
setLeft(left)　　　设style.left
setTop(top)　　　　设style.top
setRight(right)　　设style.right
setBottom(bottom)　设style.bottom
setXY(pos,animate)　设相对于页面的x,y，相当于setX,setY。用法：setXY([x,y],true)
setLocation(x,y,animate)　相当于setXY。
getRegion()        return {top=t,left=l,width=w,height=r}
getHeight(true|false)    true不包括边框、内边距，false包括
getBorderWidth(anthor)
getPadding(anthor)
getComputedHeight() 包括边框、内边距
getComputedWidth()
getSize()   相当于getWidth、getHeight   {width:w,height:h}
getStyleSize()   取style.width、style.height，且不包括边框{width:w,height:h}
getViewSize()    取视口大小{width:w,height:h}
getValue()     如果有value属必就取它
setWidth(width,animate)     设style.width
setHeight(height,animate)    设style.height
setSize(width,height,animate)
setBounds(x,y,width,height,animate)   相当于setSize、setXY
setRegion(region,animate)      相当于setBounds
getScroll()            取得当前视口在文档中水平、垂直方向上的偏移,返回{left:l,top:t}

setOpacity(opacity,animate)
getLeft(local)    false相当于getX,true相当于style.left
getRight(local)   false相当于getX+getWidth,true相当于getLeft(true)+getWidth()
getTop(local)　　 false相当于getY,true相当于style.top
getBottom(local)
position(pos,zIndex,x,y) string:pos,取static,relative,absolute,fixed
                          zIndex设z序，x,y用来调用setXY的
clearPositionsing(value) 作用非得看代码
    clearPositioning : function(value){
        value = value ||'';
        this.setStyle({
            "left": value,
            "right": value,
            "top": value,
            "bottom": value,
            "z-index": "",
            "position" : "static"
        });
        return this;
    }

getPositioning()　　取值格式如上{……}
setPositioning(pc) 用法同applyStyles
setLeftTop(left,top) 就是设style.left,style.top

moveTo(x,y,animate)　　　　相当于setXY
move(direction,distance,animate) 很有用，direction移动方向，取t,l,r,b。
distance是移动的距离，animate是否启用动画效果

getAnchorXY（anchor,local,s)　　　取得对齐到某处的页面x,y坐标
getCenterXY()　　　　　　　　　　取得对齐到视口中央的页面x,y坐标
getAlignToXY(el,p,o)　　　　　　　取得对齐到某元素某处的页面x,y坐标

alignTo(element,position,offsets,animate)　　对齐到元素的某处，允许偏移、动画
anchorTo(el,alignment,offsets,animate,monitorScroll,callback)　　对齐到元素

center(centerIn)　　　对齐到视口中央
getBox(contentBox,local)　　contentBox＝false包括边框、内边距　local＝false获取页面坐标
setBox(box,adjust,animate) box包括边框、内边距
getFrameWidth(sides,onlycontentBox)

repaint() 强制刷新元素

关于样式、属性设置

addClass(String/Array className )
removeClass(String/Array className)
replaceClass(String oldClassName, String newClassName )
radioClass(String/Array className )
toggleClass(String className )
setStyle(name,value)
getStyle(name)
hasClass(className)

addClassOnClick(classname)
addClassOnFocus(classname)
addClassOnOver(classname)
hover(classsname,bool preventFlicker)

页点操作：
append(ele)
appendTo(ele)
replace(ele)
replaceWith(ele)
insertBefore(ele)
insertAfter(ele)
insertFirst(ele)
insertHtml(where,html,returnEl)
insertSibling(el,where,returnDom)
remove()
createChild(config,HTMLElement insertbefore,returndom)

first(selector,returndom)
last(selector,returndom)
next(selector,returndom)
prev(selector,returndom)
parent(selector,returndom)
child(selector,returndom)
up(selector,maxdepth)
down(selector,maxdepth)

query(selector)

contains(HTMLElement/string el)

show(animate)
hide(animate)
toggle(animate)
setVisible(boolean visible,animate)

update(html, loadScripts, callback)

特殊的
hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element
mask(msg, msgCls)
unmask()
load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] )
focus()
blur()

事件注册：
on(eventname,fun)
un(eventname,fun)
addListenser/removeListenser/removeAllListeners