使用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;
}