无法设置undefined的属性X - 以编程方式创建的元素

时间:2012-06-12 10:26:48

标签: javascript

我正在创建一个类来创建一个相当复杂的自定义元素。我希望能够在创建元素时定义元素属性(主要是CSS)。我提出了以下函数,在给定输入数组的情况下快速为我设置了attrs:

// Sample array structure of apply_settings
//var _button_div =   {
//    syle    :   {
//        position:   'absolute',
//        padding :   '2px',
//        right   :   0,
//        top     :   0
//    }
//};
function __apply_settings(__el,apply_settings){
    try{
        for(settingKey in apply_settings){
            __setting = apply_settings[settingKey];
            if(typeof(__setting)=='string'){
                __el[settingKey] = __setting;
            }else{
                for(i in __setting){
                    __el[settingKey][i] = apply_settings[settingKey][i];
                } 
            }
        }
    }catch(ex){
        alert(ex + "   " + __el);
    }
}

除此之外,该功能正常工作:

function __draw_top(){
    var containerDiv = document.createElement('div');
    var buttonDiv = document.createElement('div');
    __apply_settings(containerDiv,this.settings.top_bar);
    if(global_settings.show_x)
        buttonDiv.appendChild(__create_img(global_settings.images.close));
    containerDiv.appendChild(buttonDiv);
    __apply_settings(buttonDiv,this.settings.button_div);
    return containerDiv;
}

失败的特定部分是__apply_settings(buttonDiv,this.settings.button_div);,错误为“无法设置未定义的属性'位置”。很自然地,我假设buttonDiv未定义。我将alert(ex + " " + __el);放在__apply_settings()中以验证我正在使用的是什么。令人惊讶的是,元素是一个div。有没有理由为什么这个函数适用于containerDiv而不是buttonDiv?任何帮助将不胜感激:)

{编辑} http://jsfiddle.net/Us8Zw/2/

1 个答案:

答案 0 :(得分:1)

那是因为你有错字:

var _button_div =   {
    syle    :   { //<--- here
        position:   'absolute',
        padding :   '2px',
        right   :   0,
        top     :   0
    }
};

如果您将其更正为style,则效果正常; http://jsfiddle.net/Us8Zw/3/

我还建议你尝试遵循一个众所周知的风格指南(而不是看似自己制作);你的代码目前很难阅读。我推荐的是Crockford Style Guide