Làm cách nào để thêm kiểu cho nội dung trong JavaScript?

Question

Tôi đã làm việc trong một tệp JavaScript và nội dung của tôi đã hoạt động với các cụm từ. Bây giờ tôi muốn thay đổi phong cách của những cụm từ đó. Hàm đầu tiên (xem hàm swapFE) Tôi muốn thay đổi kiểu phông của nút cụm từ thành bình thường. Và thay đổi màu của nút cụm từ thành giá trị màu (155, 102, 102). Hàm thứ hai (xem swapEF) Tôi muốn thay đổi kiểu phông chữ thành nghiêng và màu phông chữ thành màu đen. Làm thế nào để viết những cái này? Và tôi có viết nó trong các chức năng của tôi trong JavaScript hoặc thay đổi kiểu được áp dụng trực tiếp trong CSS hay HTML không?

Đây là hai chức năng tôi muốn áp dụng những thay đổi phong cách để:

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

Nếu bạn thậm chí có thể chỉ cho tôi điểm một tài liệu tham khảo nơi tôi có thể tìm thấy những tài sản mà muốn là tuyệt vời.

Answer 1

Tôi đã tìm ra cách thêm các thay đổi kiểu. Bằng cách viết parent.childNodes [1] .style.fontStyle = "normal" hoặc "in nghiêng" (tùy thuộc vào hàm); và 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"; 

Answer 2

obj.style.whicheverProperty = "value" 

ví dụ:

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

Các google từ khóa mà bạn đang tìm kiếm là HTML DOM (mô hình đối tượng tài liệu), trong đó xác định các phong cách khác nhau như tài sản của thành viên phong cách của một đối tượng.

Answer 3

Sử dụng element.style bạn có thể thay đổi css từ Javascript.

Ví dụ:

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

Và để giúp bạn tìm thấy những cú pháp chính xác cho các thuộc tính, đây là CSS Properties To JavaScript Reference Conversion.

Answer 4

Bạn cũng có thể chỉ cần thay đổi một lớp học để các phần tử ..

trong hàm swapFE

phrase.className = 'english'; 

và trong swapEF chức năng

phrase.className = 'french'; 

và trong file css của bạn

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