效果圖：
image.png
json 數(shù)據(jù)：
var data = {
question: "基本上一個 font-size 中 small 的大小為",
answer: "13px##14px##15px##16px"
}
涉及知識點：
- 元素居中
- 首行縮進
- 去除默認樣式
- 背景顏色設置
- DOM 操作
- 為元素賦值
- 字符串處理
【注】雖然簡單，但是要是基礎不扎實的情況下，還是很難一時間想出來的
請先 根據(jù)上面的給出的數(shù)據(jù)實現(xiàn)一遍，我相信如果你能做出來；應付初級前端面試中的簡單 操作題是沒有問題的
以下為具體實現(xiàn)代碼：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<script src="json.js"></script>
<title>前端三件套 簡單應用題</title>
</head>
<body>
<section class="box">
<h2>ssadfa</h2>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
css
*{
margin: 0;
padding: 0;
background: #e9e8e8;
}
.box{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box h2{
width: 85%;
margin: 100px 0;
text-indent: 2em;
}
.box div{
width: 70%;
height: 50px;
border-radius: 25px;
padding-left: 20px;
line-height: 50px;
margin-bottom: 20px;
background: #ffffff;
}
js
var data = {
question: "基本上一個 font-size 中 small 的大小為?",
option: "13px##14px##15px##16px",
rightAnswer: 0
}
window.onload = function () {
// 題目賦值
let title = document.getElementsByTagName('h2');
title[0].innerHTML = data.question;
// 選項前的序號
let chooseHeader = ['A. ','B. ','C. ','D. '];
// 循環(huán)遍歷每個div，并賦值且選擇正確的為 綠色
let answer = document.getElementsByTagName('div');
let option = data.option.split('##');
for(let i = 0; i < option.length; i++){
answer[i].innerText = chooseHeader[i] + option[i];
if (i == data.rightAnswer){
answer[i].style.background = '#16a951';
answer[i].style.color = '#ffffff';
}
}
}
當然 本人水平有限，不足之處請指教
