Question

我有一个下拉div我需要在单击某个元素时向下滑动，所以我写了一个js函数，到目前为止它似乎工作。对于这个元素，我使用:before和:after来创建一个类似箭头的图形，如果下拉列表向下滑动或向上滑动，我需要将样式更改为相应的。

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-string中的换行符而导致语法错误：

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上的类以向下滚动或向上滚动，然后更改css以使其具有不同的箭头

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

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

2 个答案: