establece el color y el tamaño del texto html usando javascript

Question

Supongamos que tengo la siguiente línea de código en html, ¿cómo establecer el color y el tamaño del texto dentro del elemento DIV "MonitorInformation" de una manera de programación usando Javascript de una manera fácil? Lo siento por mi estúpido, pensé hace mucho tiempo, pero no puedo entender. :-(

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

gracias de antemano, George

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Tome un vistazo a la JavaScript Style Attributes

Answer 5

He abstraje algunos métodos, que podría hacerlos un poco más útiles para múltiples invocaciones:

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

Nota: La mejor práctica para cambiar dinámicamente este tipo de cosas sería mediante el establecimiento de los estilos en un selector externo independiente:

.Message {color: red; tamaño de letra: 1.1em; }

Y alternar el nombre de clase, .className + = 'mensaje' (o una función abstraída para agregar/eliminar clases).

Answer 6

Una de las maneras más fáciles es utilizar una biblioteca como jQuery. Esto maneja todas las diferencias en las implementaciones de JavaScript del navegador para usted y le ofrece una API sencilla y fácil de programar.

agregar una referencia a jQuery usando el siguiente código:

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

entonces se puede obtener una referencia a su elemento y modificarlo de la siguiente manera:

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

Answer 7

Suponiendo sus valores de estilo no se computan en el JS, hay dos formas distintas de hacerlo:

1. La presentación se maneja mejor con CSS, por lo que debe establecerse una regla de estilo utilizando una clase que contiene la información sobre cómo desea que se vea el elemento.
2. En los elementos que desea que tengan la apariencia, use Javascript para cambiar el atributo de clase para que coincida con la clase en su CSS.

Esto tiene las ventajas de hacer la JS fácil - sólo tiene que cambiar un atributo (el atributo de clase se hace referencia con element.className en JS como 'clase' es una palabra reservada). Y que toda la información de estilo está contenida en un archivo CSS donde es fácil de comparar con los otros estilos y hacer cambios.