Hide class pseudo-elements with JavaScript

Question

How to show/hide class :before and :after pseudo elements with JavaScript?

I have arrows on both sides of div. Below is arrows style

 .edit-wrap:before,
 .edit-wrap:after {
     @media (max-width: 768px) {
         content: '';
         ....
     }
 }

I want to hide them, if, for example, there is no scroll bar in the element. And show otherwise

var scrollableElement = document.getElementById('scrollable-element');
if(scrollableElement.scrollWidth>scrollableElement.clientWidth){
               //display arrows
            } else{
               //hide arrows
            }

I am not using JQuery

by toggling edit-wrap class?

Venugopal
– Venugopal

2016-10-31 14:40:26 +00:00
Commented Oct 31, 2016 at 14:40 — Venugopal
– Venugopal, Commented Oct 31, 2016 at 14:40

Stanley · Accepted Answer · 2016-10-31 15:14:31Z

4

I think you need to use CSS and JavaScript here.

CSS

.hide-before:before, .hide-after:after { display:none; }

JavaScript

var scrollableElement = document.getElementById('scrollable-element');

if (scrollableElement.scrollWidth>scrollableElement.clientWidth) {
   scrollableElement.classList.add('hide-after','hide-before');
} else {
   scrollableElement.classList.remove('hide-after','hide-before');
}

edited Oct 31, 2016 at 15:14

answered Oct 31, 2016 at 14:44

Stanley

4,0652 gold badges21 silver badges23 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:06:46Z

2

You may remove the class which makes use of the pseudo classes :before and :after. With javascript you can achieve this by using the className property (assuming there are no other classes for the target).

var scrollableElement = document.getElementById('scrollable-element');
if (scrollableElement.scrollWidth > scrollableElement.clientWidth) {
    document.getElementById('yourElementId').className = 'edit-wrap';
} else {
    document.getElementById('yourElementId').className = '';
}

If you want to remove the specific class, you should have a look to classList, which is supported by most modern browsers.

var scrollableElement = document.getElementById('scrollable-element');
if (scrollableElement.scrollWidth > scrollableElement.clientWidth) {
    document.getElementById('yourElementId').classList.add('edit-wrap');
} else {
    document.getElementById('yourElementId').classList.remove('edit-wrap');
}

Another approach for older browsers would be using regular expressions.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 31, 2016 at 14:43

secelite

1,3381 gold badge11 silver badges19 bronze badges

1 Comment

secelite Over a year ago

@cale_b +1 for the suggested improvement. I added an example which is using classList and linked an already answered question on SO which uses regular expressions to solve the problem.

Eugene Tsakh · Accepted Answer · 2016-10-31 14:43:11Z

0

Add, for example, .hide-pseudo class to element and edit your styles like this:

.edit-wrap.hide-pseudo:before,
.edit-wrap.hide-pseudo:after {
    disply: none;
}

answered Oct 31, 2016 at 14:43

Eugene Tsakh

2,8812 gold badges18 silver badges28 bronze badges

1 Comment

random_user_name Over a year ago

how do you add the class?

Collectives™ on Stack Overflow

Hide class pseudo-elements with JavaScript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related