html - Pure Javascript add style on click - Stack Overflow

admin管理员组

文章数量:1298180

In jQuery I know how to solve this, but in pure Javascript I don't have any idea.

When click on chevron down my content show, but when show I want to change chevron to be chevron up.

I don't know how to do an 'on click' to change the style and set the following:

transform: rotate(180deg);.

Toggle effect, when click again to return chevron down and repeatly.

JSFiddle

HTML:

<p>
Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu 
</p>
<div id="show-more-footer" onclick="myFunction()">
   <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>


<div id="full-text">
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
      <li><a href="#">Number 5</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
</div>

JS:

function myFunction() {
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

CSS:

#show-more-footer{
  cursor:pointer;
}
#full-text{
  display:none;
}

In jQuery I know how to solve this, but in pure Javascript I don't have any idea.

When click on chevron down my content show, but when show I want to change chevron to be chevron up.

I don't know how to do an 'on click' to change the style and set the following:

transform: rotate(180deg);.

Toggle effect, when click again to return chevron down and repeatly.

JSFiddle

HTML:

<p>
Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu 
</p>
<div id="show-more-footer" onclick="myFunction()">
   <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>


<div id="full-text">
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
      <li><a href="#">Number 5</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
</div>

JS:

function myFunction() {
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

CSS:

#show-more-footer{
  cursor:pointer;
}
#full-text{
  display:none;
}

• javascript
• html
• css

Share Improve this question Follow edited Jan 27, 2017 at 12:09 AwkwardCoder 25.7k2929 gold badges8585 silver badges159159 bronze badges asked Jan 27, 2017 at 10:53 ml92ml92 45144 gold badges99 silver badges2020 bronze badges 4

• Why don't you use jQuery instead of reinventing the wheel? – B001ᛦ Commented Jan 27, 2017 at 10:56
• project and members not allowed me that – ml92 Commented Jan 27, 2017 at 10:57
• A possible duplicate of stackoverflow./questions/6787383/… – Eduard Malakhov Commented Jan 27, 2017 at 10:57
• 1 If you want a code that runs on more then one browser, i would strongly advise you to talk to your project members again. I have done big javascript projects before jquery and similar frameworks existed, would never do that again... – Beowolve Commented Jan 27, 2017 at 11:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can directly change style of an element in JavaScript:

element.style.transform = "rotate(180deg)";

This will appear in the HTML as :

<div id="element-id" style="transform: rotate(180deg);"></div>

You could also use the classList API and JS :

.reverse {
    transform: rotate(180deg);
}

And the JS :

element.onclick = function() {
 element.classList.toggle("reverse");
}

MDN - element.classList
CanIUse - classList
The fact that some browsers don't support the .toggle()method is not a problem, use a custom function which uses .add()or .remove().

Last advices (optional) :
I would use CSS transitions with this kind of features (like transition: all 0.3s ease-in-out;) and change your hide/show method by setting a height:0 and overflow:hidden to the content you hide, and onclick of the chevron you give him element.style.height: auto.

my first advice would be to not use inline javascript to call your function, you should use a listener instead

var button = document.getElementById('show-more-footer');
button.addEventListener('click', myFunction);

then you can use the callback first argument to get your event

function myFunction(event) {
        var button = event.currentTarget;
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
        button.querySelector('i').style.transform = 'rotate(0)'
    } else {
        x.style.display = 'block';
        button.querySelector('i').style.transform = 'rotate(180deg)'
    }
}

本文标签： htmlPure Javascript add style on clickStack Overflow