假设我在HTML中有以下代码行,请问如何使用JavaScript以编程方式轻松地设置“MonitorInformation”DIV元素内文本的颜色和大小?对不起,我的问题可能很愚蠢,但我已经思考了很长时间,但仍然无法解决。 :-(
<div id="MonitorInformation">Connecting...wait</div>
提前感谢,George
<div id="MonitorInformation">Connecting...wait</div>
提前感谢,George
var elem = document.getElementById("MonitorInformation");
elem.innerHTML = "Setting different HTML content";
elem.style.color = "Red";
elem.style.fontSize = "large";
# FFF
,0.7em
),而不是Red
,large
等非标准的值。涵义应保持不变。 - Raptorvar myDiv = document.getElementById("MonitorInformation");
myDiv.style.fontSize = "11px";
myDiv.style.color = "blue";
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'(或添加/删除类的抽象函数)。
$("#MonitorInformation").text("Hello everyone").css("color", "red")
最简单的方法之一是使用类库,比如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');
document.getElementById("MonitorInformation").innerHTML = "some text";
document.getElementById("MonitorInformation").style.color = "green";
const Monitorinfo = document.queryselector('MonitorInformation');
Monitorinfo.style.color = 'red';
Monitorinfo.style.fontSize = '20px';