set html metin rengi ve boyutu

Question

ben html aşağıdaki kod satırını olduğunu varsayalım javascript kullanarak nasıl kolay bir şekilde JavaScript kullanarak bir programlama şekilde metin rengini ve boyutunu içinde "MonitorInformation" DIV öğesi ayarlamak için? Aptallığım için üzgünüm, uzun zaman düşündüm ama anlayamıyorum. :-(önceden

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

sayesinde 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"; 

Birkaç yöntemleri abstracted ettik JavaScript Style Attributes

Answer 5

bir göz atın, Onları için biraz daha yararlı olabilir Birden fazla yürütme:

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

Not:

.message {color: dinamik ayrı dış seçicideki stilleri ayarlayarak olacağını şeyler bu tip değiştirmek için en iyi yöntem kırmızı; yazı tipi boyutu: 1.1em; }

ve sınıf adı geçiş, .className + = 'mesajı' (ya da bir soyut fonksiyon sınıflarını ekleme/kaldırma için). kolay yollarından

Answer 6

Bir jQuery gibi bir kütüphane kullanmaktır. Bu, tarayıcı JavaScript uygulamalarındaki tüm farklılıkları sizin için yönetir ve size programlamak için güzel ve kolay bir API sunar. aşağıdaki gibi

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

Sonra öğeye bir başvuru alma ve değişiklik yapabilirsiniz:

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

Answer 7

stil değerleri hesaplanmış değildir varsayarsak

Aşağıdaki kodu kullanarak jQuery başvuru ekleyin JS'de, bunun iki ayrı yolu vardır:

1. Sunum en iyi CSS tarafından ele alınır. öğenin nasıl görünmesini istediğinizle ilgili bilgileri içeren bir sınıf kullanarak stil kuralını kullanın. Eğer bir görünüme sahip istediğiniz öğeler üzerinde
, CSS'nizde sınıfıyla eşleştirmek için sınıf özelliğini değiştirmek için Javascript'i kullanabilirsiniz.

Bu kolay JS yapma faydası vardır - Yalnızca bir özelliğini değiştirmek gerekir ('sınıf' ayrılmış bir sözcüktür olarak class özelliğinin JS element.className ile başvurulmaktadır). Ve tüm stil bilgileri, diğer stillerle karşılaştırmanın ve değişiklik yapmanın kolay olduğu bir CSS dosyasında yer alıyor.