动态地为 CSS 提供值答案

【问题标题】：Dynamically provide values to CSS动态地为 CSS 提供值
【发布时间】：2016-12-04 22:03:42
【问题描述】：

我正在尝试动态设置 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。

感谢任何帮助。

【问题讨论】：

为什么不准备好一个红色和浅绿色的类，而只是根据情况添加或删除该类？
我可以这样做，但我不想这样做。
如果你能更新你的问题，显示你写的所有课程。 shape-fdd 和 dfd 都不是你的问题，所以很难理解你的意思。
很不清楚你在这里问什么？详细说明。
什么会触发动态部分？或者你只是想让它们有不同的颜色？

标签： jquery html css dynamic less

【解决方案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>

【讨论】：

【解决方案2】：

[Edited] 因为我的回答已被接受：我只是想向以后的读者强调 以下内容暂时不起作用：这在 css3 中尚不可能（目前仅支持 content 属性） :)

只是一个简短的信息说明。在 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)

【讨论】：

【解决方案3】：

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

.dfd {
    background: #dfd;
}

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

这是一个有效的JsFiddle。

【讨论】：

【解决方案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 中进行混合或扩展（检查 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

【讨论】：