注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

dojo study --- dom-prop and dom-style  

2013-11-13 20:37:49|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
dom-prop 感觉和dom-attr 功能类似,但是它的方法就只有两个。
常用方法
get(node, name) Gets a property on an HTML element.
set(node, name, value) Sets a property on an HTML element.

How to Use?

require(["dojo/dom-prop"], function(domProp){
console.log(domProp.get("features", "innerHTML"));
console.log(domProp.get("features", "class")); //section
domProp.set("features", "foo", "foo");
console.log(domProp.get("features", "foo")); //foo
});

dom-style 处理dom样式模块
常用方法
get(node, name) 与getComputedStyle 得出的都是计算后的样式,在不同浏览器下,结果可能会不同。
getComputedStyle(node) Returns a "computed style" object. 与node.style结果是不同的
set(node, name, value) 设置样式
toPixelValue(node, value) converts style value to pixels on IE or return a numeric value.

How to Use?

require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
var node = dom.byId("usage");
var getStyle = domStyle.get(node);
var computedStyle = domStyle.getComputedStyle(node);
console.log(getStyle.width == computedStyle.width); //true
console.log(getStyle.height == computedStyle.height); //true
console.log(node.style.height == computedStyle.height); //false
console.log(node.style.height == getStyle.height); //false
/*
getComputedStyle 得到实际的结果或许在不同浏览器上是不同的,因为它是计算后的样式(computed style)
get 与 getComputedStyle一样,也是得到计算后的样式,与node.style的结果是不同的
*/
});

require(["dojo/dom-style"], function(domStyle){
domStyle.set("features", {
width: "400px",
backgroundColor: "blue"
});
/*
通过传入Hash值设置多个样式
也可以设置一个样式 set("features", "width", "400px")
也可以通过设置一个""值,删除样式
*/
});

注意事项
  • If the CSS style property is hyphenated, the JavaScript property is camelCased.  For example: font-size becomes fontSize
  • You will get a TypeError: n is null, if you call get() or set() on a non existent DOM node. It’s more safe to use query("#a").style("b", "c");
  • get() uses getComputedStyle() to get the style value, so the value will be a calculated value, not just the immediate node.style value.
  • Getting the value for a compound style value (like background or border): you need to ask for specific properties, like bottomBorderWidth. Getting the background compound value is not reflected in the way you might think when using getComputedStyle().
  • For getting a node’s dimensions, use dojo/dom-geometry functions: as the .width and .style properties are not necessarily accurate from getComputedStyle().

参考资料:
http://dojotoolkit.org/reference-guide/1.9/dojo/dom-style.html#dojo-dom-style
http://dojotoolkit.org/reference-guide/1.9/dojo/dom-prop.html#dojo-dom-prop
  评论这张
 
阅读(319)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017