Применение стиля 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

Theres синтаксически ошибку из-за LineBreak в вашей 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?" здесь, на SO.

Answer 2

вы можете попробовать что-то вроде:

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

при прокрутке изменить класс на DIV к Прокрутите вниз или Scrollup и изменить CSS, так что есть различные стрелки на

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