如何在JavaScript中为内容添加样式？ [英] How do I add style to content in JavaScript?

问题描述

您好我一直在一个JavaScript文件中工作，我的内容一直使用短语。现在我想改变这些短语的样式。第一个函数（见函数swapFE）我想将短语节点的字体样式更改为正常。并将短语节点的颜色更改为颜色值（155,102,102）。第二个函数（参见swapEF）我想将字体样式更改为斜体，将字体颜色更改为黑色。我如何写这些？我在JavaScript中的那些函数中写它，或者在CSS或HTML中直接应用样式更改吗？

Hi I have been working in a JavaScript file and my content has been working with phrases. Now I want to change the style of those phrases. The first function (see function swapFE) I want to change the font style of the phrase node to normal. And change the color of the phrase node to the color value (155, 102, 102). The second function (see swapEF) I want to change the font style to italic and the font color to black. How do I write these? And do I write it within my those functions in JavaScript or do style changes get applied directly within CSS or HTML?

这两个函数我想应用样式更改to：

These are the two functions I want to apply the style changes to:

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

如果你甚至可以指向一个引用，我可以找到这些属性。

If you could even just point me to a reference where I can find these properties that'd be great.

谢谢！

推荐答案

我想出了如何添加风格更改。通过编写parent.childNodes [1] .style.fontStyle =normal或italic（取决于函数）;和parent.childNodes [1] .style.color =black。

I figured out how to add the style changes. By writing parent.childNodes[1].style.fontStyle= "normal" or "italic" (depending on the function); and parent.childNodes[1].style.color = "black".

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

这篇关于如何在JavaScript中为内容添加样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！