Add Inline Style Using JavaScript

Add inline style using Javascript

nFilter.style.width = '330px';
nFilter.style.float = 'left';

This should add an inline style to the element.

How to set inline CSS of element to default using javascript?

You can get inline CSS in style attribute of element using getAttribute() and store it in variable and on check/uncheck of checkbox insert and remove it from style attribute

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),

    terms = document.getElementById('termsText'),

    style = terms.getAttribute('style');

checkBox.addEventListener('click', function(){

  if (checkBox.checked)

    terms.style.cssText = "color:black; font-weight:normal";

  else

    terms.style.cssText = style;

});

<form id="form">

  <input type="checkbox" name="termsCheckBox">

  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea>

</form>

Using javascript to add inline css style with height dynamically calculated from container width

Why not try to enforce and aspect ratio with a pseudo element (in this case a :before). As long as no other content is inside your .entry-thumbnail-wrap - because the pseudo element will fill the aspect ratio you want and push everything else out of the way.

.entry-thumbnail-wrap {
    background-size: cover;
    background-position: center;
    height: auto;
}
.entry-thumbnail-wrap:before {
    content: '';
    width: 100%;
    /* This will give it an aspect ratio of 2/1 */
    padding-bottom: 50%;
    display: block;
}

<div class="entry-thumbnail-wrap" style="background-image: url(http://placehold.it/300x300)"></div>

---

Related Topics