将css样式应用于javascript调用后的伪元素

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); 
    } 
} 

P.S：最后一件事可能是重要的。该功能内置于一个PHP回声功能“相呼应”的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;}'); 

了解更多信息，请看一看“How do I break a string across more than one line of code in JavaScript?”在这里。

Answer 2

你可以尝试这样的：

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

滚动时您更改div来下滚或scrollUp类，并改变你的CSS，因此对

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