2009-07-27 42 views
18

假設我有代碼的HTML以下行,如何設置一個簡單的方法使用JavaScript編程方式的文本顏色和大小裏面的「MonitorInformation」 DIV元素?對不起,我愚蠢,我想了很久,但無法弄清楚。 :-(組HTML文本顏色和大小的JavaScript

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

由於事先 喬治

+3

是他們任何原因,你不能只在您的樣式表#MonitorInformation {}的規則集? – Quentin 2009-07-27 15:38:31

回答

33
var elem = document.getElementById("MonitorInformation"); 
elem.innerHTML = "Setting different HTML content"; 
elem.style.color = "Red"; 
elem.style.fontSize = "large"; 
3
$("#MonitorInformation").text("Hello everyone").css("color", "red") 
+0

我的不好,我更新了帖子,我想設置文字的大小和顏色。有任何想法嗎? :-) – George2 2009-07-27 15:30:00

+0

這個答案需要jQuery。 – 2009-07-27 15:30:20

+2

爲什麼每個人都在stackoverflow.com給jQuery jQuery的答案JavaScript的問題? – palindrom 2009-07-27 15:30:53

1
document.getElementById("MonitorInformation").innerHTML = "some text"; 
document.getElementById("MonitorInformation").style.color = "green"; 
5
var myDiv = document.getElementById("MonitorInformation"); 
myDiv.style.fontSize = "11px"; 
myDiv.style.color = "blue"; 

看看在JavaScript Style Attributes

5

我已經提取了一些方法,這可能會使它們更有用多次調用:

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 + =「消息」(或抽象功能增加/刪除類)。

2

一個最簡單的方法是使用一個庫像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'); 
2

假設你的風格值不計算在JS中,有兩種單獨的方式部分:

  1. 演示文稿最好由CSS處理,所以設置使用包含關於元素外觀的信息的類來創建樣式規則。
  2. 在您想要外觀的元素上,使用Javascript更改class屬性以匹配CSS中的類。

這具有使JS輕鬆的好處 - 您只需要更改一個屬性(類屬性被引用爲JS中的element.className,因爲'class'是保留字)。而且所有的樣式信息都包含在一個CSS文件中,可以很容易地與其他樣式進行比較並進行更改。