如何更改此元素的样式属性

How can I change the style properties of this element?

本文关键字：样式 属性 元素 何更改      更新时间：2023-09-26

我正在为移动版网站制作下拉菜单，但似乎不知道自己做错了什么。我有我想要的初始位置(固定在屏幕的右上角(，但当你点击菜单选项卡时，它什么也不做。这是我的JSFiddle

<div id="mobile-nav-wrapper">
    <ul id="mobile-nav">
        <li>Main Menu</li>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Register</li>
            <li>FAQs</li>
            <li>Facebook</li>
        </ul>
        <li>This Page</li>
        <ul>
            <li>Some Text</li>
            <li>Who?</li>
        </ul>
    </ul>
    <span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span
</div>

您的JavaScript函数不是全局函数。您已经将JSFiddle配置为将其封装在一个onload处理程序中。在该函数的范围之外无法访问它。

不要使用内部事件属性，它们依赖于全局变量。将事件处理程序与JS绑定。

span不是一个交互元素。它不会出现在焦点顺序中，因此当你依赖于与它交互的人时，它会对可访问性产生严重影响。请使用按钮。如果你不喜欢CSS的外观，就应用它。

<button type="button" id="mobile-nav-button">Menu</button>
<script>
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) {
   pullmenu('#mobile-nav-wrapper');
});
function pullmenu(etc) { etc }
</script>

JavaScript

<script>
function pullmenu(menu) {
var x = document.getElementById(menu).style;
if (x.top == "-15em") {x.top="0";}
else {x.top="-15em";}
}
</script>

HTML：

<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>

示例

相关文章：