效果图：
image.png
json 数据：
var data = {
question: "基本上一个 font-size 中 small 的大小为",
answer: "13px##14px##15px##16px"
}
涉及知识点：
- 元素居中
- 首行缩进
- 去除默认样式
- 背景颜色设置
- DOM 操作
- 为元素赋值
- 字符串处理
【注】虽然简单，但是要是基础不扎实的情况下，还是很难一时间想出来的
请先 根据上面的給出的数据实现一遍，我相信如果你能做出来；应付初级前端面试中的简单 操作题是没有问题的
以下为具体实现代码：
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. '];
// 循环遍历每个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';
}
}
}
当然 本人水平有限，不足之处请指教
