将 css 应用于 javascript 变量答案

【问题标题】：Applying css to a javascript variable将 css 应用于 javascript 变量
【发布时间】：2019-03-11 17:21:31
【问题描述】：

我想使用 css 为 javascript 变量添加颜色和边框。以下是我的代码；

var msg = "OK"; //i want this to colored and bordered with green.
msg = "Conflict"; // i want this to be colored and bordered with red.

我尝试了其他问题的另一个答案，但它似乎对我不起作用。

【问题讨论】：

嗯，这不是 Javascript 的工作原理 :)
你不能将 css 应用到 js 但你可以使用 js 来设置 html 元素的样式。
@julekgwa，怎么样？
这取决于如何使用此变量，如何准确地显示其值以及在何处显示。只要它只是一个抽象的内部对象，甚至说它有任何“颜色”都是没有意义的。
如果你写var msg = "OK"，这意味着变量msg，在你计算机内存的某个地方，保存着值"OK"。没有其他的。它没有颜色、大小、心理或任何东西的概念。这只是一个值。但是您可以将此值写入您的 HTML 文档，例如在 <div> 或其他内容中，然后使用 CSS 设置该 div 的样式并为其指定颜色和大小。这是网络开发的第一天，第一个小时，我建议你学习一些非常基础的教程:)

标签： javascript css

【解决方案1】：

如果您只是想向 JavaScript 变量添加样式，则不能这样做，而且我不明白您希望通过这样做来实现什么。

因此，我假设您想将样式添加到 您已提取为 JavaScript 变量的 html 元素，就像这样

let msgElement = document.getElementById('msg')
let msg = "OK"
msgElement.innerHTML = msg

在这种情况下，您可以像这样为元素添加样式

msgElement.style.color = "red"
msgElement.style.border = "2px solid red"

在您的示例中，当您将 msg 的值更改为“冲突”时，您就是在这样做 - 更改它。您不能有两个单独的值由同一个变量保存。

正如其中一位 cmets 所说，这是基本的 Web 开发，所以我建议您进一步阅读，或者在线课程，例如 Codeacademy 提供的课程

【讨论】：

它什么都不做
你到底想达到什么目的？
你真的只需要像我的答案一样显示sn-p，在问题中添加额外的代码。

【解决方案2】：

正如其他答案所述，您不能将 CSS 规则应用于变量。但是，您可以执行以下操作：

<html>
<head>
<style>
.redgreen {border-style: solid; border-color: green; color: red;}
</style>
<script>
function foo() {
    let msg = "<div class='redgreen'>Hello, world!</div>";
    document.getElementById("themsg").innerHTML = msg;
    }
</script>
</head>
<body onload='foo();'>
<p id='themsg'>Your message here</p>
</body>
</html>

也就是说，将“msg”定义为 HTML 元素而不是文本字符串。

【讨论】：

这对我来说似乎不是一个好习惯。使用.innerHTML 将div 添加到p 元素不是一个好主意，因为p 元素除了span 等内联元素之外不应真正有任何子元素
所以把
改成别的！我的回答的重点是，他可以通过将类（或其他任何东西——有很多调用 CSS 规则的方法）编码为文本的一部分来设置他的消息样式。他不需要编写代码来设置他要替换的对象的样式。
我的意思是你不应该那样使用innerHTML。但你是对的，就这个问题而言，这并不重要。

【解决方案3】：

您不能将 CSS 添加到 javascript 变量中。

如果你是使用 javascript 创建元素

html:

<div class="parent-div">

</div>

js:

var msg = "OK";
element = document.createElement('p');

// Give the new element some content and css
element.innerHTML = msg;
element.style.color = 'green';
element.style.border = "1px solid red";

// append element to parent div
document.querySelector('.parent-div').appendChild(element);

不用javascript就行了

html:

<div class="parent-div">
  <p class="child-one">OK</p>
  <p class="child-two">Conflict</p>
</div>

css:

.parent-div .child-one {
  color: red;
  border: 1px solid green;
}

.parent-div .child-two {
  color: green;
  border: 1px solid red;
}

【讨论】：

我正要说“这是评论，不是答案”，但实际上是正确答案。但是，您还应该指导 OP 如何实现他们想要的目标
但是先生，我没有那么多声誉可以评论