Question

我写了一个简单的函数：

function addColoredBorder(color) {
    $(".coloredBorder").css({
        border-left: color,
        padding-left: "15px",
        border-radius: "10px"
    });
};

然后在HTML中我会调用该函数，但由于某种原因，它不接受它。我知道，你可以这样做：

function f_border () {
  return "border:"
}

function f_attribute(x) {
  return x
}

function addColoredBorder() {
    $(".coloredBorder").css(f_border(), f_attribute());
});

但我需要它尽可能紧凑和简单。 toggleClass是不可能的。

所以专家，如何在不编写大量代码的情况下设置颜色？

（PS。第二段代码可能根本不正确，但我相信它有点像。）

Answer 1

从border:函数中删除f_border()中的冒号。

Answer 2

您正尝试将属性border-left设置为颜色。但是，这不是border-left的正确语法。应将其设置为1px solid #333。因此，如果要编写要更改的函数，请执行以下操作：

function addColoredBorder(color) {
    $(".coloredBorder").css({
        'border-left': '1px solid '+color,
        'padding-left': "15px",
        'border-radius': "10px"
    });
};

Answer 3

javascript解析器不喜欢在对象键中使用不带引号的破折号。

    "border-left": color,
    "padding-left": "15px",
    "border-radius": "10px"

或者，jQuery也支持你的CSS密钥：

    borderLeft: color,
    paddingLeft: "15px",
    borderRadius: "10px"

Answer 4

除非引用它们，否则

对象文字属性名称中不能包含破折号。所以你需要使用css属性的camelCase版本或引用它们

因此代码应如下所示：

function addColoredBorder(color) {
    $(".coloredBorder").css({
        "borderLeft": color,
        "paddingLeft": "15px",
        "borderRadius": "10px"
    });
};

Answer 5

存在导致问题的语法错误。

 <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            function addColoredBorder(color) {
                $(".coloredBorder").css({
                    'border-color': color,
                    'padding-left': "15px",
                    'border-radius': "10px"
                });
            }
        </script>
    </head>
    <body>
        <div class="coloredBorder" style="border:solid;">
This is a div content        
        </div>
        <button id="but1" onclick="addColoredBorder('red')"> apply red color </button>
    </body>
    </html>

jQuery使用函数设置属性

5 个答案: