How to access JavaScript element style from styles.CSS, Django

Question

I have this JavaScript code that does createElement, but how can I style it from my separate CSS file?

JavaScript

emails.forEach(function(email) {
const element = document.createElement('div');
element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
document.querySelector('#email-container').append(element);
});

HTML

<div id="email-container">

</div>

CSS

#email-container .element{
    border-width:2px;
    border-style:solid;
    border-color:black;
}

Robin Zigmond · Accepted Answer · 2021-04-13 21:28:58Z

1

if you're styling it that way, then you expect the div to have class element. So you just need one extra line to add that class to the element. Full code here:

emails.forEach(function(email) {
  const element = document.createElement('div');
  element.classList.add('element');
  element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
  document.querySelector('#email-container').append(element);
});

answered Apr 13, 2021 at 21:28

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alwayslearning Over a year ago

I have added the line and edited the CSS to #email-container .element it does the work, do you suggest any other solution that is better used in real-world projects?

Robin Zigmond Over a year ago

Not really, using a class seems fine - you usually use classes and/or IDs for CSS styles, and since you are adding several different elements here you can't use an ID (as they need to be unique in the document).

Alwayslearning Over a year ago

I see, Thank you!

Collectives™ on Stack Overflow

How to access JavaScript element style from styles.CSS, Django

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related