假設我有代碼的HTML以下行,如何設置一個簡單的方法使用JavaScript編程方式的文本顏色和大小裏面的「MonitorInformation」 DIV元素?對不起,我愚蠢,我想了很久,但無法弄清楚。 :-(組HTML文本顏色和大小的JavaScript
<div id="MonitorInformation">Connecting...wait</div>
由於事先 喬治
假設我有代碼的HTML以下行,如何設置一個簡單的方法使用JavaScript編程方式的文本顏色和大小裏面的「MonitorInformation」 DIV元素?對不起,我愚蠢,我想了很久,但無法弄清楚。 :-(組HTML文本顏色和大小的JavaScript
<div id="MonitorInformation">Connecting...wait</div>
由於事先 喬治
var elem = document.getElementById("MonitorInformation");
elem.innerHTML = "Setting different HTML content";
elem.style.color = "Red";
elem.style.fontSize = "large";
document.getElementById("MonitorInformation").innerHTML = "some text";
document.getElementById("MonitorInformation").style.color = "green";
var 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')
注意:
.message {顏色:動態地改變這種類型的東西將是在一個單獨的外部選擇設置樣式的最佳實踐紅色;字體大小:1.1em; }
而切換的類名,.className + =「消息」(或抽象功能增加/刪除類)。
一個最簡單的方法是使用一個庫像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');
假設你的風格值不計算在JS中,有兩種單獨的方式部分:
這具有使JS輕鬆的好處 - 您只需要更改一個屬性(類屬性被引用爲JS中的element.className
,因爲'class'是保留字)。而且所有的樣式信息都包含在一個CSS文件中,可以很容易地與其他樣式進行比較並進行更改。
是他們任何原因,你不能只在您的樣式表#MonitorInformation {}的規則集? – Quentin 2009-07-27 15:38:31