如何使用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
答案 0 :(得分: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。
答案 1 :(得分: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');
}
答案 2 :(得分:0)
例如,将.hide-pseudo类添加到元素并编辑样式,如下所示:
.edit-wrap.hide-pseudo:before,
.edit-wrap.hide-pseudo:after {
disply: none;
}