用JavaScript隱藏類僞元素

如何顯示/隱藏類：before和之後：用JavaScript添加僞元素？用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

來源

2016-10-31 blahblah

通過切換'編輯wrap'類？ – Venugopal

添加，例如，.hide僞類元素和編輯你的風格是這樣的：

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

來源

2016-10-31 14:43:11

*如何添加課程？ –

您可以刪除該類使用僞類: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。

來源

2016-10-31 14:43:17 secelite

@cale_b謝謝，我糾正了我的例子。 – secelite

@cale_b +1建議的改進。我添加了一個使用'classList'的例子，並且在SO上使用正則表達式來解決問題。 – secelite

我認爲你需要在這裏使用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'); 
}

來源

2016-10-31 14:44:07

@cale_b更新了答案。 –

用JavaScript隱藏類僞元素

回答

相關問題