Question

我想使用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.

我尝试了其他问题的另一个答案，但似乎不适用于我。

Answer 1

您不能将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;
}

Answer 2

如果您只是想向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的值更改为“冲突”时，您就是在做-更改它。同一变量不能包含两个单独的值。

其中一条评论说，这是基础的Web开发，因此，我建议您进行进一步的阅读，或者使用在线课程，例如Codeacademy

Answer 3

在其他答案中，您不能将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元素而不是文本字符串。

将CSS应用于javascript变量

3 个答案: