将 css 应用于 javascript 变量
[英]Applying css to a javascript variable
问题描述
我想使用 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.
我尝试了其他问题的另一个答案，但似乎对我不起作用。
3 个解决方案
解决方案1
0 2019-03-11 08:06:38
您不能将 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;
}
解决方案2
0 2019-03-11 08:18:56
如果您只是尝试向 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提供的课程
解决方案3
0 2019-03-11 08:42:34
正如其他答案所述，您不能将 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代码
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.