元素的样式
示例代码
获取元素的样式
var backgroundColor = domlib.css(node,"backgroundColor");
设置元素的样式
domlib.css(node,"backgroundColor","red");
工具函数列表
uDOMlib所提供的工具函数之中,有一部分与元素样式相关,下面列出部分函数的源代码实现以供参考。
addClass
給元素添加一个或多个类。 该方法不会移除已存在的class属性,仅仅添加一个或多个class属性,添加多个类需使用空格分隔类名。
addClass: function(el,name){ var re = classRE(name); if (!el.className.match(re)){ el.className += (el.className ? " " : "") + name; } }
css
获取或设置元素的一个或多个样式属性
css: function(el,property, value){ if (arguments.length < 3) { var computedStyle, computedStyle = getComputedStyle(el, '') if (utils.isString(property)) { return el.style[utils.camelize(property)] || computedStyle.getPropertyValue(property) } else if (utils.isArray(property)) { var props = {}; Array.forEach(property, function(prop){ props[prop] = (el.style[String.camelize(prop)] || computedStyle.getPropertyValue(prop)) }); return props } } var css = '' ; if (type(property) == 'string') { if (!value && value !== 0) el.style.removeProperty(dasherize(property)); else css = dasherize(property) + ":" + maybeAddPx(property, value) } else { for (key in property) if (!property[key] && property[key] !== 0) el.style.removeProperty(dasherize(key)); else css += dasherize(key) + ':' + maybeAddPx(key, property[key]) + ';' } el.style.cssText += ';' + css; return this; }
hasClass
检查元素是否包含指定的类。
hasClass: function(el,name){ var re = classRE(name); return el.className.match(re); }
removeClass
从元素移除一个或多个类
removeClass: function(el,name){ var re = classRE(name); if (el.className.match(re)){ el.className = el.className.replace(re, " "); } return this; }
toggleClass
对元素的一个或多个类进行切换。 该方法检查元素是否已设置指定的类。如果不存在则添加类,如果已设置则删除之。
toggleClass: function(el,name){ var re = classRE(name); if (el.className.match(re)){ el.className = el.className.replace(re, " "); } else { el.className += (el.className ? " " : "") + name; } return this; }