javascript - 如何为 JavaScript 代码创建的每个 div 设置样式

Question

我正在创建一个电子邮件站点，用户在单击邮箱(收件箱、已发送、已存档)后，我将向他们显示属于该邮箱的所有电子邮件。
现在我的问题是布局，每封电子邮件的边框都没有按照我想要的方式显示。这应该是这样的，灰色背景的电子邮件是已读的，而白色不是:

这是代码出现的内容:

我希望它们分开，但我无法让它工作。帮助将不胜感激!
收件箱.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);
    }

  });

收件箱.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 %}

Answer 1

好吧，首先你有一个错字:element.style.boder你错过了 border 中的“r” .你能先检查一下吗？