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

あなたが特定のクラスを削除したい場合は、supported by most modern browsersである、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'); 
} 

古いブラウザのもう1つのアプローチは、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'); 
}