Question

我正在尝试动态设置div的颜色。

要概述问题，请查看以下内容：

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1"></div>
    <div class="shape" id="shape2"></div>
    <div class="shape" id="shape3"></div>
</body>
</html>

以下是我正在使用的CSS：

.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}

我是否有可能在html中给出class="shape-fdd"然后它显示浅红色，如果我给class="shape-dfd"然后它显示浅绿色？

我刚刚查看了LESS，但我不知道它是否可以提供此功能。

我不会为此寻找jQuery解决方案。如果可能，只有CSS或LESS或SASS。

感谢任何帮助。

Answer 1

使用jquery和两个不同的类可以实现这样的

<强> HTML

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape-dfd" id="shape1"></div>
    <div class="shape-dfd" id="shape2"></div>
    <div class="shape-dfd" id="shape3"></div>
    <input type="button" id="classDfd" value="Add dfd class" />
    <input type="button" id="classFdd" value="Add fdd class" />
</body>
</html>

<强>风格

.shape-dfd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}
.shape-fdd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #fdd;
  margin: 20px;
}
</style>

<强> Jquery的

<script>
$(document).ready(function () {

   $("#classDfd").click(function(){

       $("div[id^='shape']").removeClass("shape-fdd");
       $("div[id^='shape']").addClass("shape-dfd");
   });

   $("#classFdd").click(function(){

       $("div[id^='shape']").removeClass("shape-dfd");
       $("div[id^='shape']").addClass("shape-fdd");
   });
});
</script>

Answer 2

你可以在你的CSS上创建一个新类，并在你的html中使用它。

.dfd {
    background: #dfd;
}

然后class="shape dfd"应用.shape类的颜色。

这是一个有效的JsFiddle。

Answer 3

[已编辑] ，因为我的回答已被接受：我只想强调后来的读者以下目前的工作还没有成功：这在css3中尚不可能（目前仅支持内容属性）：）

快速了解相关信息。在css3中尚不可能（目前仅针对内容属性），但可能很快就会出现：

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1" data-color="#fdd"></div>
    <div class="shape" id="shape2" data-color="#fdd"></div>
    <div class="shape" id="shape3" data-color="#fdd"></div>
</body>
</html>


.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: attr(data-color);
  margin: 20px;
}

可以查看CSS - Add Color with a data attribute - attr(data-color color)

Answer 4

根据你想如何动态设置它，javascript / jQuery？我会从这开始。设置数据属性中的颜色并在css中指定颜色，或者根据动态部分的要求执行普通类。

像

这样的东西

[data-color="blue"] {
  background-color: deepskyblue !important;
}

[data-color="red"] {
  background-color: tomato !important;
}

你的html看起来像

<div class="shape" data-color="blue"></div>
<div class="shape" data-color="red"></div>

demo found at jsfiddle

修改如果我找到了你，你想要这个。您必须在SCSS中进行mixin或扩展（检查LESS的语法，jsfiddle仅支持SCSS，因此我使用它）。你做了一个基类，然后用颜色扩展一次，就像这个

.shape { background-color: aqua; display: inline-block; height: 100px; width: 100px; } .shape-blue { @extend .shape; background-color: deepskyblue; } .shape-red { @extend .shape; background-color: tomato; }

demo on jsfiddle

动态地为CSS提供值

4 个答案: