Скрыть псевдоэлементы класса с JavaScript

Question

Как показать/скрыть класс: до и: после псевдоэлементов с JavaScript?

У меня есть стрелы по обе стороны от div. Ниже стрелки стиль

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

Я хочу, чтобы скрыть их, если, например, нет полосы прокрутки в элементе. И показать, в противном случае

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

Я не использую JQuery

Answer 1

Добавить, например, .hide-псевдо класс к элементу и редактировать стили, как это:

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

Answer 2

Вы можете удалить класс, который использует псевдоклассы :before и :after. С помощью javascript вы можете достичь этого, используя свойство className (предполагая, что для цели нет других классов).

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

Если вы хотите удалить определенный класс, вы должны взглянуть на classList, который 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'); 
} 

Другой подход для старых браузеров будет использовать regular expressions.

Answer 3

Думаю, вам нужно использовать CSS и JavaScript здесь.

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'); 
}