Установить цвет и размер текста html с помощью javascript

Предположим, что у меня есть следующая строка кода в html, как установить цвет текста и размер внутри элемента DIV MonitorInformation в программировании, используя Javascript в простой форме? Извините за мою глупость, я долго думал, но не могу понять.: - (

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

спасибо заранее, Джордж

Ответ 1

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

Ответ 2

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

Взгляните на Атрибуты JavaScript JavaScript

Ответ 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' (или абстрактная функция для добавления/удаления классов).

Ответ 4

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

Ответ 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');

Ответ 6

Предполагая, что ваши значения стиля не вычисляются в JS, для этого есть два отдельных способа:

Презентация лучше всего обрабатывается CSS, поэтому настройте правило стиля, используя класс, который содержит информацию о том, как вы хотите, чтобы элемент выглядел.
На элементах, которые вы хотите иметь внешний вид, используйте Javascript, чтобы изменить атрибут класса, чтобы он соответствовал классу в вашем CSS.

Это дает преимущества упрощения JS - вам нужно только изменить один атрибут (атрибут class ссылается на element.className в JS, поскольку "класс" является зарезервированным словом). И что вся информация о стиле содержится в одном файле CSS, где легко сравнивать с другими стилями и вносить изменения.

Ответ 7

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