मैं जावास्क्रिप्ट में सामग्री में शैली कैसे जोड़ूं?

Question

मैं एक जावास्क्रिप्ट फ़ाइल में काम कर रहा हूं और मेरी सामग्री वाक्यांशों के साथ काम कर रही है। अब मैं उन वाक्यांशों की शैली को बदलना चाहता हूं। पहला फ़ंक्शन (फ़ंक्शन स्वैपई देखें) मैं वाक्यांश नोड की फ़ॉन्ट शैली को सामान्य में बदलना चाहता हूं। और वाक्यांश नोड का रंग रंग मान (155, 102, 102) में बदलें। दूसरा फ़ंक्शन (स्वैप देखें) मैं फ़ॉन्ट शैली को इटैलिक में बदलना चाहता हूं और फ़ॉन्ट रंग को काला रंग में बदलना चाहता हूं। मैं इन्हें कैसे लिखूं? और क्या मैं इसे जावास्क्रिप्ट में अपने कार्यों में लिखता हूं या शैली परिवर्तन सीधे सीएसएस या एचटीएमएल के भीतर लागू होता है?

//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]; 

तुम भी बस मुझे एक संदर्भ जहां मैं इन गुणों कि महान होगा पा सकते हैं को इंगित कर सकता है:

इन दोनों कार्यों मैं करने के लिए शैली में परिवर्तन लागू करना चाहते हैं।

Answer 1

मुझे पता चला कि शैली में बदलाव कैसे जोड़ें। Parent.childNodes लिखकर [1] .style.fontStyle = "सामान्य" या "इटालिक" (फ़ंक्शन के आधार पर); और parent.childNodes [1] .style.color = "काला"।

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

गूगल कीवर्ड आप देख रहे हैं एचटीएमएल डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) है, जो एक वस्तु की शैली सदस्य के गुणों के रूप में विभिन्न शैलियों को परिभाषित करता है।

Answer 3

element.style का उपयोग करके आप जावास्क्रिप्ट से सीएसएस बदल सकते हैं।

उदाहरण के लिए:

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

और तुम विशेषता के लिए सटीक सिंटैक्स को खोजने में मदद करने के लिए, यहाँ CSS Properties To JavaScript Reference Conversion है।

Answer 4

तुम भी सिर्फ एक वर्ग तत्व को .. swapFE समारोह

phrase.className = 'english'; 

में और swapEF समारोह

phrase.className = 'french'; 

में और अपने सीएसएस फ़ाइल में बदल सकता है

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