Question

我使用Waypoints.js（http://imakewebthings.com/waypoints/api/waypoint/ - 无框架依赖）。

现在我想改变航点上的CSS属性。以模块化方式处理代码的最佳方法是什么？

HTML：

<div class="header" id="header"></div>
<button class="menu"></button>

JS：

var waypoint = new Waypoint({

    element: document.getElementById('direction-waypoint'),
    handler: function(direction) {
        if (direction == 'down') {
            document.getElementById("header").setAttribute("style", "position: fixed;");
            document.getElementById("header").style.backgroundColor = "white";
            document.getElementById("menu").getElementsByTagName("li")[0].setAttribute("style", "background-color: #999;");
            document.getElementById("menu").getElementsByTagName("li")[1].setAttribute("style", "background-color: #999;");
            document.getElementById("menu").getElementsByTagName("li")[2].setAttribute("style", "background-color: #999;");

        } else {
            document.getElementById("header").setAttribute("style", "position: absolute;");
            document.getElementById("menu").getElementsByTagName("li")[0].setAttribute("style", "background-color: default;");
            document.getElementById("menu").getElementsByTagName("li")[1].setAttribute("style", "background-color: default;");
            document.getElementById("menu").getElementsByTagName("li")[2].setAttribute("style", "background-color: default;");

        }
    }

});

Answer 1

你是这样做的。

var waypoint = new Waypoint({

    element: document.getElementById('direction-waypoint'),
    handler: function(direction) {

    var headerElem = document.getElementById("header"),
    menuElem = document.getElementById("menu");

        if (direction == 'down') {
            )

    headerElem.style.position = 'fixed';
    headerElem.style.background-color = 'white';

    menuElem.children[0].style.background-color = '#999';
     menuElem.children[1].style.background-color = '#999';
            menuElem.children[2].style.background-color =  '#999';

        } else {

     headerElem.style.position = 'absolute';

     menuElem.children[0].style.background-color = '';
     menuElem.children[1].style.background-color = '';
    menuElem.children[2].style.background-color = '';

        }
    }

});

如果您执行console.dir，则可以看到所有元素属性。这是使用vanilla JavaScript时评估内容的好方法。

var headerElem = document.getElementById("header");

console.dir(headerElem);

更改CSS属性

1 个答案: