Ответ 1
var elem = document.getElementById("MonitorInformation");
elem.innerHTML = "Setting different HTML content";
elem.style.color = "Red";
elem.style.fontSize = "large";
Предположим, что у меня есть следующая строка кода в html, как установить цвет текста и размер внутри элемента DIV MonitorInformation в программировании, используя 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";
var myDiv = document.getElementById("MonitorInformation");
myDiv.style.fontSize = "11px";
myDiv.style.color = "blue";
Взгляните на Атрибуты JavaScript JavaScript
Я выделил несколько методов, которые могли бы сделать их более полезными для нескольких вызовов:
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' (или абстрактная функция для добавления/удаления классов).
$("#MonitorInformation").text("Hello everyone").css("color", "red")
Один из самых простых способов - использовать библиотеку, например 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 - вам нужно только изменить один атрибут (атрибут class ссылается на element.className
в JS, поскольку "класс" является зарезервированным словом). И что вся информация о стиле содержится в одном файле CSS, где легко сравнивать с другими стилями и вносить изменения.
document.getElementById("MonitorInformation").innerHTML = "some text";
document.getElementById("MonitorInformation").style.color = "green";