Javascript jQuery使用函数设置属性_Javascript_Jquery

Javascript jQuery使用函数设置属性

javascript jquery

Javascript jQuery使用函数设置属性,javascript,jquery,Javascript,Jquery,我写了一个简单的函数： function addColoredBorder(color) { $(".coloredBorder").css({ border-left: color, padding-left: "15px", border-radius: "10px" }); }; 然后在HTML中我会调用这个函数，但由于某种原因，它不接受它。我知道，你可以做到： function f_border () { retur

我写了一个简单的函数：

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());
});

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

那么专家们，我如何在不编写大量代码的情况下设置颜色呢

（顺便说一句，第二段代码可能根本不正确，但我相信它有点像那样。）

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

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

或者，jQuery也支持对CSS键进行驼峰式压缩：

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

从

f_border（）

函数中的

border:

中删除冒号。

对象文字属性名称中不能有破折号，除非它们被引用。因此，您需要使用camelCase版本的css属性或引用它们

因此，代码应该如下所示：

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

您正在尝试将属性

左边框

设置为颜色。但是，这不是

border left

的正确语法。它应该设置为类似于

1px solid#333

。因此，如果要编写要更改的函数，请执行以下操作：

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

存在导致问题的语法错误

 <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>


函数addColoredBorder（颜色）{
$（“.coloredBorder”）.css({
“边框颜色”：颜色，
“左填充”：“15px”，
“边界半径”：“10px”
});
}
这是一个div内容
涂红色

“它不接受它”请对此展开讨论，它以什么方式不接受它？您的问题是您的css属性不在引号中。它应该是“左边框”：颜色等。