使用JavaScript隐藏类伪元素

Question

如何使用JavaScript显示/隐藏类：before和：after伪元素？

我在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

您可以删除使用伪类的类: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 ， 大多数现代浏览器都支持 classList 。

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

旧版浏览器的另一种方法是使用正则表达式 。

Answer 2

我认为您需要在此处使用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');
}

Answer 3

例如，将.hide-pseudo类添加到element并编辑您的样式，如下所示：

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