Как добавить стиль к контенту в JavaScript? - PullRequest
Новая
       27

Как добавить стиль к контенту в JavaScript?

5 голосов
/ 31 января 2010

Я работал в файле JavaScript, и мой контент работал с фразами. Теперь я хочу изменить стиль этих фраз. Первая функция (см. Функцию swapFE) Я хочу изменить стиль шрифта узла фразы на обычный. И измените цвет узла фразы на значение цвета (155, 102, 102). Вторая функция (см. SwapEF). Я хочу изменить стиль шрифта на курсив, а цвет шрифта - на черный. Как мне написать это? И я пишу это в моих этих функциях в JavaScript или изменения стиля применяются непосредственно в CSS или HTML?

Это две функции, к которым я хочу применить изменения стиля: 

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

Если бы вы могли просто указать мне ссылку, где я мог бы найти эти свойства, которые были бы великолепны.

Ответы [ 4 ]

10 голосов
/ 31 января 2010 
obj.style.whicheverProperty = "value"

например: 

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

Ключевым словом Google, которое вы ищете, является HTML DOM (объектная модель документа), который определяет различные стили как свойства элемента стиля объекта.

1 голос
/ 31 января 2010

Вы также можете просто изменить класс на элемент ..

в функции swapFE 

phrase.className = 'english';

и в функции swapEF 

phrase.className = 'french';

и в вашем файле CSS 

.english{ color:#9b6666; }
.french{ font-style:italic; color:#000; }
0 голосов
/ 31 января 2010

Я понял, как добавить изменения стиля. Путем записи parent.childNodes [1] .style.fontStyle = "normal" или "italic" (в зависимости от функции); и 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";
0 голосов
/ 31 января 2010

Используя element.style, вы можете изменить CSS из Javascript.

Например: 

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

И чтобы помочь вам найти точный синтаксис для атрибута, вот Свойства CSS в JavaScript Преобразование ссылок .

...