<% docs.forEach( function ( doc ){ %>

<div class="item">
    <% if (doc.Active) { %>
    <style> .item { background-color:red }</style>
    <% } %>
</div>

<% }); %>

Imagine 3 docs,

doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)

I want to give style to Active == true only. I coded like above, but the result is every div was given style. so finally all has red background, this is not what I expected.

How can I give style conditionally in EJS?

<% docs.forEach( function ( doc ){ %>

<div class="item">
    <% if (doc.Active) { %>
    <style> .item { background-color:red }</style>
    <% } %>
</div>

<% }); %>

Imagine 3 docs,

doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)

I want to give style to Active == true only. I coded like above, but the result is every div was given style. so finally all has red background, this is not what I expected.

How can I give style conditionally in EJS?

• javascript
• css
• ejs

2 Answers 2

You would want to conditionally set a class like .active and have that with your CSS styles (such as the red background-color). Like this:

<% docs.forEach(function (doc) { %>    
  <div class="item <%= doc.Active ? 'active' : '' %>"></div>
<% }); %>

The syntax is:

<style> .item { background-color:red; } </style>

and to only set that to just one of the items, use:

<style>
   .active { background-color:red; } 
</style>

<% docs.forEach( function ( doc ){ %>

<% if (doc.Active) { %>
   <div class="item acitve">
<% } else { %>
   <div class="item">
<% } %>

   ...

  </div>

<% }); %>