Question

假设我在html中有以下代码行，如何使用Javascript以简单的方式在编程方式中设置“MonitorInformation”DIV元素中的文本颜色和大小？对不起我的愚蠢，我想了很长时间，但想不通。： - （

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

提前谢谢，乔治

Answer 1

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

Answer 2

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

查看JavaScript Style Attributes

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')

注意：动态更改此类内容的最佳做法是在单独的外部选择器中设置样式：

.message {color：red;字体大小：1.1em; }

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

Answer 4

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

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');

Answer 6

假设您的样式值未在JS中计算，则有两个独立的方法：

演示文稿最好由CSS处理，因此请使用包含有关元素外观信息的类来设置样式规则。
在要获得外观的元素上，使用Javascript更改类属性以匹配CSS中的类。

这样可以使JS变得简单 - 您只需要更改一个属性（类属性在JS中用element.className引用，因为'class'是保留字）。并且所有样式信息都包含在一个CSS文件中，可以很容易地与其他样式进行比较并进行更改。

Answer 7

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

Answer 8

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

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

使用javascript设置html文本颜色和大小

8 个答案: