使用JavaScript设置HTML文本的颜色和大小

Question

假设我在HTML中有以下代码行，请问如何使用JavaScript以编程方式轻松地设置“MonitorInformation”DIV元素内文本的颜色和大小？对不起，我的问题可能很愚蠢，但我已经思考了很长时间，但仍然无法解决。 :-(

<div id="MonitorInformation">Connecting...wait</div>

提前感谢，George

- George2

---

你有没有什么理由不能在你的样式表中包含一个 #MonitorInformation {} 的规则集？ - Quentin

Answer 1

var elem = document.getElementById("MonitorInformation");
elem.innerHTML = "Setting different HTML content";
elem.style.color = "Red";
elem.style.fontSize = "large";

- AnthonyWJones

---

我的错，我已经更新了帖子，我想设置文本的大小和颜色。有什么想法？ :-) - George2

建议使用实际值（例如# FFF，0.7em），而不是Red，large等非标准的值。涵义应保持不变。 - Raptor

Answer 2

var myDiv = document.getElementById("MonitorInformation");
myDiv.style.fontSize = "11px";
myDiv.style.color = "blue";

请查看JavaScript样式属性。

- Russ Cam

Answer 3

我已经抽象化了几种方法，这可以使它们更适用于多次调用：

var el = document.getElementById("MonitorInformation");

function text( el, str ) {
    if ( el.textContent ) {
         el.textContent = str;
    } else {
         el.innerText = str;
    }
}

function size ( el, str ) {
     el.style.fontSize = str;
}

function color ( el, str ) {
     el.style.color = str;
}

size( el, '11px') 
color( el, 'red' )
text(el, 'Hello World')

Note: 最佳实践是通过在单独的外部选择器中设置样式来动态更改此类型的内容：

.message { color:red; font-size:1.1em; }

并切换类名，.className+= 'message'（或添加/删除类的抽象函数）。

- meder omuraliev

Answer 4

$("#MonitorInformation").text("Hello everyone").css("color", "red")

- Lloyd

---

我的错，我已经更新了帖子，我想设置文本的大小和颜色。有什么想法？ :-) - George2

为什么stackoverflow.com的所有人都给JavaScript问题提供jQuery答案？ - palindrom

因为他们太习惯了这种方式，而忘记了真正的 DOM 编写脚本吗？:p - meder omuraliev

Answer 5

最简单的方法之一是使用类库，比如jQuery。它会自动处理浏览器JavaScript实现的差异，并提供一个易于编程的API。

使用以下代码添加对jQuery的引用：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

然后，您可以获取对您的元素的引用并按照以下方式进行修改：

$("#MonitorInformation").css('font-size', '2em').css('color', '#FF0000');

- dariom

---

或者只需将一个对象传递到css()命令中，其中包含您想要设置的CSS属性和值。 - Russ Cam

使用 pt 单位可能存在问题 - http://css-discuss.incutio.com/?page=UsingPoints - 请不要在示例中使用它们。 - Quentin

@David Dorward - 说得好，我已经编辑了答案，使用“em”代替。 - dariom

为了获取一个元素并设置两个样式属性，加载整个库是完全过度的。 - NickFitz

Answer 6

假设您的样式值不是在JS中计算的，这里有两个独立的部分：

1. 最好使用CSS处理演示，因此设置一个包含有关如何设置元素外观的信息的类的样式规则。
2. 对于您想要具有外观的元素，请使用Javascript更改class属性以匹配CSS中的类。

这样做的好处是使JS易于操作-您只需要更改一个属性（在JS中，class属性用element.className引用，因为'class'是保留字）。并且所有样式信息都包含在一个CSS文件中，很容易与其他样式进行比较和更改。

- edeverett

Answer 7

document.getElementById("MonitorInformation").innerHTML = "some text";
document.getElementById("MonitorInformation").style.color = "green";

- palindrom

---

我的错，我已经更新了帖子，我想设置文本的大小和颜色。有什么想法？ :-) - George2

Answer 8

const Monitorinfo = document.queryselector('MonitorInformation');

Monitorinfo.style.color = 'red';
Monitorinfo.style.fontSize = '20px';

- Xiao

---

虽然这段代码可能解决了问题，但是包括解释真的有助于提高您的帖子质量。 - 4b0