將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{...}