如何升级createElement函数以支持对象形式编写style属性

当然可以！只需要在处理属性的逻辑里加个特殊判断，就能同时支持对象形式和原有字符串形式的style设置，还能兼容你原来的所有调用方式。

下面是修改后的完整函数：

var createElement = function(sel, att, val) {
    var a = document.createElement(sel);
    // 处理元素内容或输入框值
    if (sel === "input") {
        a.value = val;
    } else {
        a.innerHTML = val;
    }
    // 将元素插入文档
    document.body.appendChild(a) || document.documentElement.appendChild(a);
    
    // 处理属性（核心修改部分）
    if (att) { // 先判断att是否存在，避免传null时报错
        for (var key in att) {
            if (key === "style" && typeof att[key] === "object") {
                // 遍历style对象，逐个设置样式属性
                for (var styleProp in att[key]) {
                    a.style[styleProp] = att[key][styleProp];
                }
            } else {
                // 普通属性依然用setAttribute处理
                a.setAttribute(key, att[key]);
            }
        }
    }
    
    return a;
};

关键改进说明： #

• 新增了att的存在性判断，避免你传null作为属性参数时（比如你的前两个基础调用）进入循环报错；
• 对style属性做特殊处理：如果它的值是对象类型，就遍历该对象的每个键值对，直接赋值给元素的style对象（这是DOM元素样式操作的标准方式，比字符串更灵活易维护）；
• 完全保留了原有逻辑的兼容性：不管是字符串形式的style，还是其他普通属性，甚至是无属性的调用，都能正常工作。

测试你的目标调用： #

现在你可以直接用对象形式传递样式了：

createElement("h1", { style: { color: "white", backgroundColor: "#008eff", padding: "20px" } }, "Hello" );

同时原来的字符串写法也依然有效：

createElement("h1", { style: "color : white; background-color : #008eff; padding : 20px;" }, "Hello" );

你的基础调用（如createElement("h1", null, "Hello")）也不会受到任何影响。

内容的提问来源于stack exchange，提问作者debarchito