如何设置由JavaScript代码创建的每个div的样式

我正在为电子邮件创建一个站点，用户单击邮箱（收件箱、已发送、已存档）时，我将向他们显示属于该邮箱的所有电子邮件

现在我的问题是布局，每封邮件的边框都不是我想要的显示方式。应该是这样的，灰色背景的电子邮件是可读的，而白色背景的电子邮件不是：

这就是代码显示的内容：

我想让他们分开，但我不能让他们工作。谢谢你的帮助

inbox.js：

function load_mailbox(mailbox) {

  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;

  //get me all the emails in inbox(example)
  fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
    
    //for each email
    emails.forEach(myFunction);

    function myFunction(item) {

      //create a new div htmlelement
      const element = document.createElement('div');
      //give it a class in case i need it
      element.setAttribute("class", "email-dv")

      //add info to this div
      element.innerHTML += item.sender + "<br>";
      element.innerHTML += item.subject + "<br>";
      element.innerHTML += item.timestamp + "<br>";
      
      //create the borders for the div
      //issue here, it is not creating a rectangle for each div
      element.style.boder = "groove"; 

      //if email is not read
      if (item.read === false) { 
        element.style.backgroundColor = "white";
      }
      else {
        element.style.backgroundColor = "grey";
      }

      element.addEventListener('click', function() {
        console.log('This element has been clicked!')
      });

      //add it to the main div for all emails
      document.querySelector('#emails-view').append(element);
    }

  });

功能加载\u邮箱（邮箱）{
//显示邮箱并隐藏其他视图
document.querySelector（“#电子邮件视图”）.style.display='block'；
document.querySelector（“#撰写视图”）.style.display='none'；
//显示邮箱名称
document.querySelector（“#emails view”）.innerHTML=`${mailbox.charAt（0.toUpperCase（）+mailbox.slice（1）}`；
//给我收件箱中的所有电子邮件（示例）
获取（`/emails/${mailbox}`）
.then（response=>response.json（））
。然后（电子邮件=>{
//每封邮件
emails.forEach（myFunction）；
功能myFunction（项目）{
//创建一个新的divhtmlElement
常量元素=document.createElement（'div'）；
//如果我需要的话，给它上课
element.setAttribute（“类”、“电子邮件dv”）
//将信息添加到此分区
element.innerHTML+=item.sender+“
”；
element.innerHTML+=item.subject+“
”；
element.innerHTML+=item.timestamp+“
”；
//为div创建边框
//这里的问题是，它不是为每个div创建一个矩形
element.style.boder=“groove”；
//如果电子邮件未被阅读
如果（item.read==false）{
element.style.backgroundColor=“白色”；
}
否则{
element.style.backgroundColor=“灰色”；
}
元素。addEventListener（'click'，function（）{
console.log（'已单击此元素！'）
});
//将其添加到所有电子邮件的主div
document.querySelector（“#emails view”）.append（元素）；
}
});

inbox.html：

{% extends "mail/layout.html" %}
{% load static %}

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>

<div id="emails-view" >
</div>

    <div id="compose-view">
        <h3 id="h">New Email</h3>
        <form id="compose-form">
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" class="btn btn-primary" id="submit-button"/>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

{%extends“mail/layout.html”%}
{%load static%}
{%block body%}
{{request.user.email}
收件箱
组成
发送
存档

新电子邮件
发件人：
致：
{%endblock%}
{%block script%}
{%endblock%}

首先，你有一个打字错误：

---

element.style.boder

您在

边框中缺少了“r”

。您能先检查一下吗？

“//这里的问题是，它不是为每个div创建一个矩形”-您试图设置一个

boder

，而不是边框。（您应该分配类，而不是设置内联样式。）@CBroe好吧，这对我来说相当尴尬。修复了错误，他们现在正以我想要的方式显示。我只需要添加边距来更好地修复它们。谢谢，是的，你是正确的。他们显示正确，谢谢（我会在几分钟内接受你的答案）。如果这个问题对你有帮助，那么在问题的左侧打勾。