将 css 样式应用于 javascript 调用中的 :after 伪元素

Question

我有一个下拉div，当单击某个元素时，我需要向下滑动，所以我写了一个js函数，到目前为止它似乎可以工作。对于这个特定的元素，我使用:before和:after创建了一个箭头状的图形，我需要根据下拉div 是向下还是向上滑动来更改样式。

function opere_slide(){
    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
    }
}

这就是为什么我在上面的函数中添加了一个和平，应该创建一个 HTML 样式元素，从而应用我需要的新 css 代码。问题是：功能似乎不再起作用了。

function opere_slide(){
    head=document.getElementsByTagName('head')[0];
    stylesheet=document.createElement('style');
    ul=document.getElementById('opere');
    opere_tag=document.getElementById('opere_tag');
    margin=ul.style.marginTop;
    if(margin=='0px'){
       ul.style.marginTop='-200px';
       opere_tag.style.backgroundColor='white';
       opere_tag.style.borderBottomColor='#BCD2EE';
    }
    else{
       ul.style.marginTop='0px';
       opere_tag.style.backgroundColor='#F8F8F8';
       opere_tag.style.borderBottomColor='#E0E0E0';
       text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
       div#opere_tag:after{border-top:10px solid #F8F8F8;}');
       stylesheet.appendChild(text);
       head.appendChild(stylesheet);
    }
}

PS：最后一件事可能很重要。该函数是 php echo 函数的内部函数，该函数"回显"HTML 脚本元素。这就是为什么我只使用单引号。

Answer 1

由于textnode字符串中的换行符而存在语法错误：

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;}
   div#opere_tag:after{border-top:10px solid #F8F8F8;}');

只需删除该换行符：

text=document.createTextNode('div#opere_tag:before{border-top:10px solid #E0E0E0;} div#opere_tag:after{border-top:10px solid #F8F8F8;}');

有关更多信息，请查看 SO 上的"如何在 JavaScript 中跨多行代码中断字符串？

Answer 2

你可以尝试这样的东西：

<div class="???">
 ...
</div>

当您滚动时，您将div 上的类更改为向下滚动或向上滚动，并更改您的 css，使其具有不同的箭头

.scrollUp div#opere_tag:after{...}
.scrollDown div#opere_tag:after{...}