在javascript中改变police/font-size



你好,所以我想改变我的答案的大小,但它是在javascript中,我不知道如何改变它,因为我不能改变它在我的css文件

let questions = [
{
question: 'Quel est la capitale de la France?',
answers:[
{ text : 'tokyo', correct:'false', index:1 },
{ text : 'juin', correct:'false', index:2 },
{ text : 'ab', correct:'false', index:3 },
{ text : 'paris', correct:'true', index:4 }
]
},
{
question: 'Quel est la capitale de la belgique?',
answers:[
{ text : 'tokyo', correct:'false', index:1 },
{ text : 'juin', correct:'false', index:2 },
{ text : 'ab', correct:'false', index:3 },
{ text : 'paris', correct:'true', index:4 }
]
}
]

您可以像这样更改文本字段的样式:

let q1,a1,q2,a2;
let questions = [
{
question: 'Quelle est la capitale de la France?',
answers:[
{ text : 'tokyo', correct:'false', index:1 },
{ text : 'juin', correct:'false', index:2 },
{ text : 'ab', correct:'false', index:3 },
{ text : 'paris', correct:'true', index:4 }
]
},
{
question: 'Quelle est la capitale de la Belgique?',
answers:[
{ text : 'tokyo', correct:'false', index:1 },
{ text : 'juin', correct:'false', index:2 },
{ text : 'ab', correct:'false', index:3 },
{ text : 'bruxelles', correct:'true', index:4 }
]
}
]
window.addEventListener("DOMContentLoaded",changeFontStyle);
function changeFontStyle(){
q1 = document.getElementById("question1");
a1 = document.getElementById("answer1");
q2 = document.getElementById("question2");
a2 = document.getElementById("answer2");

let fontFam='Helvetica,sans-serif';

q1.style.color="#ff0000";
q1.style.fontSize="20pt";
q1.style.fontFamily = fontFam;
q1.style.fontWeight="bold";
a1.style.color="#008800";
a1.style.fontSize="16pt";
a1.style.fontFamily = fontFam;
a1.style.fontWeight="normal";

q2.style.color="#ff0000";
q2.style.fontSize="20pt";
q2.style.fontFamily = fontFam;
q2.style.fontWeight="bold";
a2.style.color="#008800";
a2.style.fontSize="16pt";
a2.style.fontFamily = fontFam;
a2.style.fontWeight="normal";

q1.innerHTML = questions[0].question;
a1.innerHTML = questions[0].answers[3].text;
q2.innerHTML = questions[1].question;
a2.innerHTML = questions[1].answers[3].text;
}
<p id="question1">question 1</p>
<p id="answer1">réponse 1</p>
<p id="question2">question 2</p>
<p id="answer2">réponse 2</p>

最新更新