Как я добавляю стиль к содержанию в JavaScript?
Я работал в файле 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 ответа
Я выяснил, как добавить изменения в стиле. Письмо 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";
Также можно просто изменить класс на элемент ...
в функции swapFE
phrase.className = 'english';
и в функции swapEF
phrase.className = 'french';
, а в css-файле
.english{ color:#9b6666; }
.french{ font-style:italic; color:#000; }
Использование Element.Style Вы можете изменить CSS из JavaScript.
Например:
document.getElementById('mydiv').style.backgroundColor = 'red';
и, чтобы помочь вам найти точный синтаксис для атрибута, вот свойства CSS-CSS для конвертации ссылочного обращения JavaScript .
obj.style.whicheverProperty = "value"
например:
document.getElementById('mydiv').style.fontVariant = "italic";
Ключевое слово google, которое вы ищете, это HTML DOM (модель объекта документа), который определяет различные стили как свойства члена стиля объекта.