How to change CSS float value through javascript

Question

I'm using div with CSS value float: right;. I would like to change that by using JavaScript to change float attribute to left using on click function.

So I'm using click event listener:

document.getElementById("english").addEventListener("click", function isEnglish(){
    document.getElementsByClassName('tab').style.cssFloat = "left";
});

but I fail to change float direction, the element stays in the same place. Codepen

How can I change float direction using JavaScript?

You are required to post a [mcve] here, within your question and not a link to your site or any third party site. — Rob, Dec 31 '19 at 12:50
accept/upvote the answer if it helped, check [When Someone Answers](https://stackoverflow.com/help/someone-answers) — Akash Shrivastava, Dec 31 '19 at 13:02

Akash Shrivastava · Accepted Answer · 2019-12-31T12:52:10.687

document.getElementsByClassName('tab') returns a list of elements to you may have to iterate over it.

The js property for float is float instead of ccsFloat you used in your code.

document.getElementById("english").addEventListener("click", function isEnglish(){
    Array.from(document.getElementsByClassName('tab')).forEach(v => {
        v.style.float = "left";
    });
});

p {
  width: 50px;
  height: 50px;
  float: right;
  margin: 10px;
  background: red
}

<p class="tab">a</p>
<p class="tab">b</p>
<p class="tab">c</p>
<p class="tab">d</p>
<p class="tab">e</p>

<button id="english">english</button>

How to change CSS float value through javascript

1 Answers1