我想使用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变量中，则无法执行此操作，并且我不明白您希望通过这样做实现的目标。
因此，我假设您要将样式添加到您已提取为JavaScript变量的html元素中，如此
let msgElement = document.getElementById('msg')
let msg = "OK"
msgElement.innerHTML = msg
在这种情况下，您可以像这样向元素添加样式
msgElement.style.color = "red"
msgElement.style.border = "2px solid red"
在您的示例中，当您将msg的值更改为“Conflict”时，您正在这样做 - 更改它。您不能拥有由同一变量保存的两个单独的值。
正如其中一条评论所说，这是基本的网络开发，所以我建议进一步阅读，或者在线课程，如Codeacademy提供的那些
您无法将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;
}
正如其他答案所述，您无法将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元素而不是文本字符串。