set html text color and size using javascript

Question

Hello everyone,

Suppose I have the following line of code in html, how to set the text color and size inside "MonitorInformation" DIV element in a programming way using Javascript in an easy way? Sorry for my stupid, I figured a long time but cannot figure out. :-(

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

thanks in advance, George

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Take a look at the JavaScript Style Attributes

Answer 5

I've abstracted a few methods, which could make them a little more useful for multiple invocations:

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: The best practice to dynamically change this type of stuff would be by setting the styles in a seperate external selector:

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

And toggling the class name, .className+= 'message' ( or an abstracted function to add/remove classes ).

Answer 6

One of the easiest ways is to use a library like jQuery. This handles all the differences in browser JavaScript implementations for you and gives you a nice, easy API to program against.

Add a reference to jQuery using the following code:

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

Then you can get a reference to your element and modify it as follows:

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

Answer 7

Assuming your style values are not computed in the JS, there are two seperate ways parts to this:

1. Presentation is best handled by CSS, so set up a style-rule using a class that contains the information about how you want the element to look.
2. On the elements that you want to have the appearance, use Javascript to change the class attribute to match the class in your CSS.

This has the benefits of making the JS easy - you only need to change one attribute (the class attribute is referenced with element.className in JS as 'class' is a reserved word). And that all the styling information is contained in one CSS file where it's easy to compare to the other styles and make changes.