JavaScript'te içeriğe nasıl stil eklerim?

Question

Bir JavaScript dosyasında çalışıyorum ve içeriğim kelime öbekleriyle çalışıyor. Şimdi bu ifadelerin stilini değiştirmek istiyorum. İlk işlev (işlev swapFE'ye bakın) Ifade düğümünün yazı tipi stilini normal olarak değiştirmek istiyorum. Ve ifade düğümünün rengini renk değerine değiştirin (155, 102, 102). İkinci işlev (bkz. SwapEF) Yazı tipi stilini italik ve yazı tipi rengini siyah olarak değiştirmek istiyorum. Bunları nasıl yazarım? Ve bu işlevlerimin içinde JavaScript’e yazabilirim veya stil değişiklikleri doğrudan CSS veya HTML’ye uygulanıyor mu? Hatta sadece ben harika olur bu özellikleri bulabileceğiniz bir referans bana gelin olsaydı

//this function changes the French phrase to an English phrase. 
function swapFE(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
    var parent = phrase.parentNode; 
    //childNodes[0] is the number of the phrase +1 
    var idnum = parent.childNodes[0]; 
    //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 
    var phrasenum = parseInt(idnum.innerHTML)-1; 
    phrase.innerText = english[phrasenum]; 

    } 


function swapEF(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
    var parent = phrase.parentNode; 
    var idnum = parent.childNodes[0]; 
    var phrasenum = parseInt(idnum.innerHTML)-1; 
    phrase.innerText = french[phrasenum]; 

:

Bunlar

Ben stil değişiklikleri uygulamak istediğiniz iki işlev vardır. Örneğin

Answer 1

Stil değişikliklerinin nasıl ekleneceğini anladım. Parent.childNodes [1] yazarak .style.fontStyle = "normal" veya "italic" (işleve bağlı olarak); ve parent.childNodes [1] .style.color = "siyah".

//this function changes the French phrase to an English phrase. 
    function swapFE(e) { 
      var phrase = e.srcElement; 
      //phrase.innerText = english[phrase.id]; 
      var parent = phrase.parentNode; 
      //childNodes[0] is the number of the phrase +1 
      var idnum = parent.childNodes[0]; 
      //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 

     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = english[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "normal"; 
     //Below is the correct way to write an RGB style. 
     parent.childNodes[1].style.color = "rgb(155, 102, 102)"; 
} 


function swapEF(e) { 
     var phrase = e.srcElement; 
     //phrase.innerText = english[phrase.id]; 
     var parent = phrase.parentNode; 
     var idnum = parent.childNodes[0]; 
     var phrasenum = parseInt(idnum.innerHTML)-1; 
     phrase.innerText = french[phrasenum]; 
     parent.childNodes[1].style.fontStyle= "italic"; 
     parent.childNodes[1].style.color= "black"; 

Answer 2

obj.style.whicheverProperty = "value" 

:

document.getElementById('mydiv').style.fontVariant = "italic"; 

aradığınız google anahtar kelime bir nesnenin tarzı üyesi özellikleri olarak çeşitli stilleri tanımlayan HTML DOM (Document Object Model) vardır.

Answer 3

element.style'u kullanarak css'i Javascript'ten değiştirebilirsiniz. Örneğin

:

document.getElementById('mydiv').style.backgroundColor = 'red'; 

Ve Özellik için tam sözdizimi bulmalarına yardımcı olmak için, burada CSS Properties To JavaScript Reference Conversion bu.

Answer 4

Ayrıca sadece swapFE fonksiyonu

phrase.className = 'english'; 

ve swapEF fonksiyonu

phrase.className = 'french'; 

içinde ve css dosyasında .. elemana

bir sınıf değişebilir

.english{ color:#9b6666; } 
.french{ font-style:italic; color:#000; }