1

我有一个下拉 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：最后一件事可能很重要。该函数是“回显” HTML 脚本元素的 php echo 函数的内部。这就是我只使用单引号的原因。

4

2 回答 2

1

由于文本节点字符串中的换行符而出现语法错误：

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

有关更多信息，请查看“如何在 JavaScript 中的多行代码中拆分字符串？ ”在这里。

于 2012-06-17T20:52:43.347 回答
0

您可以尝试以下方法：

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

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

.scrollUp div#opere_tag:after{...}
.scrollDown div#opere_tag:after{...}
于 2012-06-17T20:55:13.373 回答