Question

我有一个需要背景颜色和边框填充的脚本。 CSS应该做的伎俩，但我应该添加属性的一段代码是javascript。这是一段代码...（对不起，伙计们，我不是一个javascript的家伙。提前致谢!!!）

        $(this).find('.slide-tabs li').eq(showIndex).css({
            opacity: 1
            >>>background-color: #fff<<<
            >>>border: 2px solid #ddd<<<
        });

Answer 1

如果json键包含key之类的特殊字符，则需要在双引号中包含-(in background-color)。否则json是错的。＆安培; Javascript抛出错误。＆安培;如果值是像#fff这样的字符串，则必须在js。

中的引用"#fff"中包含

$(this).find('.slide-tabs li').eq(showIndex).css({
    "opacity": 1,
    "background-color": "#fff",
    "border": "2px solid #ddd"
});

Answer 2

如果您直接在<script>中使用该代码，则需要使用document而不是this。此外，您还可以使用addClass向HTML元素添加自定义类。当您需要影响CSS属性的数量时，使用addClass使代码易于管理，易于阅读和修改。

var showIndex = 0;
$(document).find('.slide-tabs li').eq(showIndex).addClass('li-custom');

.li-custom{
    opacity: 1;
    background: #fff;
    border: 2px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<ul class='slide-tabs'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>

Answer 3

在我的dillema中使用javascript插入自定义类或修改后的属性，我提出了一个解决方案。我决定用css来做，而不是费心去做所有这些。在我的问题中，我使用的javascript或jquery没有产生活动类，因此无法使用css（）修改它们。直到我发现我可以通过重建规则来修改它... li [style * =＆＃34; opacity：1＆＃34;] {}。因此，以此开头的所有列表都将进行所需的修改。

如何使用javascript设置背景颜色和边框

3 个答案: