Javascript .每个属性都是由属性组成的

好的，我已经尝试了5个不同的版本，我很确定我的代码越来越糟糕，所以我想我应该停下来寻求帮助

以下是我想做的：

在HTML中，假设我创建此按钮：

<button border="#ff0000" bg="#0000ff" color="#fff" pad="10px">Click Me</button>

如果我说不通，请告诉我=]

更新

下面的代码可以工作，但我只是忍不住觉得有一种更简单/更短的方法来编写代码，因为正如您所看到的，我经常重复相同的代码

$(document).ready(function() {

    $("button").each(function() {
        var bg = $(this).attr("bg");
        var border = $(this).attr("border");
        var color = $(this).attr("color");
        var radius = $(this).attr("radius");
        var pad = $(this).attr("pad");

        if($(this).attr("bg")) {
            $(this).css("background", bg)
        }

        if($(this).attr("border")) {
            $(this).css("border-color", border)
        }

        if($(this).attr("color")) {
            $(this).css("color", color)
        }

        if($(this).attr("radius")) {
            $(this).css("border-radius", radius)
        }

        if($(this).attr("pad")) {
            $(this).css("padding", pad)
        }
    });

});

---

很高兴看到您找到了一个有效的解决方案。关于优化您的答案，您可以采取以下几种方法。我在下面分享了一个，你可能会发现它很有用，其中有一些评论总结了正在发生的事情

$（文档）.ready（函数（）{
$（“按钮”）。每个（函数（）{
//缓存对象文本中每个按钮的jQuery选择器
变量选择器={
'背景'：$（this.attr（“bg”），
'边框颜色'：$（此）.attr（“边框”），
'color'：$（this.attr（“color”），
“边界半径”：$（this.attr（“半径”），
'padding'：$（this.attr（“pad”）
};
//迭代对象
for（选择器中的var属性）{
if（选择器.hasOwnProperty（属性））{
//如果当前键具有属性集
如果（选择器[属性]）{
//使用对象键和缓存的jQuery属性设置按钮的CSS属性
$（this）.css（属性，选择器[property]）；
}
}
}
});
});
点击我
点击我
点击我

$(document).ready(function() {

    $("button").each(function() {
        var bg = $(this).attr("bg");
        var border = $(this).attr("border");
        var color = $(this).attr("color");
        var radius = $(this).attr("radius");
        var pad = $(this).attr("pad");

        if($(this).attr("bg")) {
            $(this).css("background", bg)
        }

        if($(this).attr("border")) {
            $(this).css("border-color", border)
        }

        if($(this).attr("color")) {
            $(this).css("color", color)
        }

        if($(this).attr("radius")) {
            $(this).css("border-radius", radius)
        }

        if($(this).attr("pad")) {
            $(this).css("padding", pad)
        }
    });

});