南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

其实网页上很多炫的交互动作都是通过JavaScript操作样式表来实现的，这里谈一下我学习YUI的这部分经验。YUI中操作样式表以及元素属性的方法一共有7个，很少，也比较好理解。

getStyle ( el , property )：这个方法是获取元素的某个特定属性，el可以是String、HTMLElement、Array，注意property是不能为Array的，样式有内嵌的和外链的，读取内嵌的（特指style定义的）还好，如果是链入的，因为IE和Dom获取style的方式不同（IE是currentStyle，而Dom的方法是window.getComputedStyle），所以经常我们使用的时候要判断，而YUI的这个方法已经涵盖了两种情况，可以随意的使用。另外提到的一点是，float是JavaScript的保留字，所以在读取样式的时候要cssFloat（Dom）或者styleFloat（IE）来代替，我也是在读YUI代码的时候发现这一点。貌似直接读取样式的操作并不常用，至少我是。。。

setStyle ( el , property , val )：这个方法应该是比较常用滴，因为我们操作样式表的目的就是为了改变元素的样式，需要注意的东西跟上一个一样，这里就不多说啦。

addClass ( el , className )：这个方法的作用是给元素添加一个className，正常我们操作的时候，要么直接设置el.className=”，要么el.className += ”，其实YUI代码里使用的方法并没什么高级的：Y.Dom.setAttribute(el, CLASS_NAME, trim(current + SPACE + className))，这个函数其实并没有比我们正常使用的方法高级多少，但是值得注意的是这里的el可以是Array的~

replaceClass ( el , oldClassName , newClassName )：这个方法是去替换元素的某个已经存在className，在普通Dom方法里我们也就是简单的replace一下，但是YUI里的这段代码却很费劲，主要是它考虑的太多了，觉得一般不会有那么变态的className命名吧。YUI的这段代码写的很精彩：

className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to)).split(Y.Dom._getClassRegex(to));
// insert to into what would have been the first occurrence slot
className.splice(1, 0, SPACE + to);
Y.Dom.setAttribute(el, CLASS_NAME, trim(className.join(EMPTY)));

其实我开始看的时候并不理解为什么要这么做，当时想着只要className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to))就OK了，为啥要拆了再组合，刚才写的时候请教了玉伯，总算想明白了哈，其实它的目的就是为了让className完美一点，就是里边没有多余的空格，每个className之间只有一个空格。

removeClass ( el , className )：这个方法其实就是把已有的className替换成空，当然如果元素本身并没有这个className，就会do nothing。

getAttibute ( el , attr )：就是获取元素的attribute属性值，这个需要注意的就是在IE8以下版本的IE浏览器和其他现代浏览器对class和for的差别（IE8以下版本：’for’: ‘htmlFor’,'class’: ‘className’，而其他正好反过来，我是在读YUI代码的时候才了解到for的差别），当然使用YUI的时候就不用考虑这个差异了。

generateId ( el , prefix )：这个的应用应该不多，其实它的作用就是给元素加上一个id，而且这个id是唯一的，如果当前元素有id的话，那么就什么都不做，最后返回的是这个id的名字（可能是一个数组，因为el可以是数组）。

标签： Dom, style, YUI

这篇文章发布于 2009年03月23日，星期一，22:40，归类于 YUI。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。