一道简单 前端应用题

效果图：

image.png

json 数据：

var data = {
    question: "基本上一个 font-size 中 small 的大小为",
    answer: "13px##14px##15px##16px"
}

涉及知识点：

1. 元素居中
2. 首行缩进
3. 去除默认样式
4. 背景颜色设置
5. DOM 操作
6. 为元素赋值
7. 字符串处理

【注】虽然简单，但是要是基础不扎实的情况下，还是很难一时间想出来的

请先 根据上面的給出的数据实现一遍，我相信如果你能做出来；应付初级前端面试中的简单 操作题是没有问题的

以下为具体实现代码：

html

    
    
    
    
    
    


    

        
ssadfa
        

        

        

        

    

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';
        }
    }
}

当然 本人水平有限，不足之处请指教