在我的web应用的方法之一,我动态创建HTML元素和使用此代码添加一个动态进行的CSS对象:Jquery的CSS功能犯规使用所有参数在地图
tag = typeof(tag) !== 'undefined' ? tag : "div";
end = typeof(end) !== 'undefined' ? end : true;
var html = '<'+tag+' value="'+this.id+'" class="element '+this.type+'"'+
'style="position:absolute;z-index= '+this.id+'"'
end ? html += "></"+tag+">" : html += "/>";
var css = {},element = this;
$.each(this.properties(),function(){
var hash=this.indexOf("Color") !== -1?'#':'';
var property = typeof(element[this])==='number'?element[this]*Nx.ratio:element[this];
css[this]=hash+property;
})
console.log(css);
html = $(html).css(css);
$('.page[value='+page+']').append(html);
这里是CSS的一个例子所创建并传递给CSS()函数从我的console.log采取对象:
Object
backgroundColor: "#ff0000"
borderColor: "#ffffff"
borderStyle: "solid"
borderWidth: "0"
height: "56.865"
left: "0"
top: "274.29"
width: "893.115"
__proto__: Object
现在的问题是,作为输出元件不必须顶部,左侧,高度和宽度的性能,例如:
<div value="12" class="element rectangle" style="position: absolute; background-color: rgb(255, 0, 0); left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; "></div>
非常感谢,Frédéric是对的,我应该在我的数字末尾添加一个“px”。但感谢您的提示,我从来不知道tag = tag || 'div'...有没有我能找到更多这种简写代码的地方? – 2012-04-25 10:22:21