Yahoo!UI(YUI)从翻译开始 DOM 篇

Dom Collection
Dom Collection 包括一组便捷的方法,简化常用的DOM脚本方法,包含元素定位和CSS样式管理,同时规范了跨浏览器的兼容的不同情况

Getting Started
为了使用Dom Collection ,在你的页面上包含一下的脚本标签:
<!– Dependencies –>
<script src=”http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js”></script>

<!– Source file –>
<script src=”http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js”></script>

YAHOO.util.Dom是一个单独的类,不需要初始化。从YAHOO.util.Dom你可以简单使用类方法(例如:YAHOO.util.Dom.getXY(“myElementId”),YAHOO.util.Dom.getStyle(“myElementId”))

使用Dom Collection
以下章节描述了一些常用的Dom Collection.包含这些部分:
1.?定位HTML元素
2.?获取和设置风格
3.?获得视窗尺寸
4.?管理class名称

定位HTML元素
如何定位一个HTML元素在document中的位置,获得其在当前页面中的坐标可能是一项挑战。Dom Collection的定位方法(setXY(),getXY(),setX()等等)可以被确保精确定位。页面坐标被定义在整个HTML document中,包括跨浏览器。

在接下来的例子中,getXY方法返回ID属性为“test”的HTML元素的X和Y的坐标数组。setXY方法设置第二个ID为target的HTML元素的坐标为‘test’的坐标:
Var pos =YAHOO.util.Dom.getXY(’test’);
YAHOO.util.Dom.setXY(’target’, pos);

获得和设置样式

getStyle方法可以允许你重新找回元素对象的风格;setStyle方法允许您设置元素的样式属性。在CSS中,应用一种样式有不同的方法是建立在浏览器之上的;setStyle和getStyle 方法用不透明的属性正常化解决了这一问题。注:Opera第9版之前是不支持CSS透明化的。

在接下来的例子中,setStyle方法设置ID为”test”的方法和ID为”test2”元素都有0.5的不透明度(或者是50%;不透明度在0和1之间)。getStyle方法返回当前ID为”test2”的HTML元素的不透明度的值。
YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);

获得视图尺寸

这个视图被定义为当前可见的document的宽度和高度,无论是绝对的document尺寸还是。获得当前视图尺寸是建立在跨浏览器和渲染模式上的挑战。getViewpoortWidth和getViewportHeight方法确保精确视图的测量。

以下例子创建了一个数组名为viewport和包含当前视图的定义。
var viewport = [
?? YAHOO.util.Dom.getViewportWidth(),
?? YAHOO.util.Dom.getViewportHeight()
];

管理class名称
Dom Collection收集了大量的方法,来动态管理类名。
包括
?getElementsByClassName(className,tagName,rootNode):返回一组元素数组有class name应用的。能够被任意范围内由tagName 或者 根节点来增加表达。
?hasClass(element,className):决定一个元素是否提供class name。
?addClass(element,className):增加class name到元素中。
?removeClass(element,className):从元素中移除class name
?replaceClass(element,oldClassName,newClassName):从给出的元素中更换另一个class name。
接下来的例子返回一个用友test的class name的DIV元素的数组。
var elements = YAHOO.util.Dom.getElementsByClassName(’test’, ‘div’);

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Yahoo!UI(YUI)从翻译开始 DOM 篇

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏