CSS属性を変更する

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を実行すると、すべての要素のプロパティが表示されます。これは、あなたがバニラのJavaScriptを使用しているときに評価する良い方法です。

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

console.dir(headerElem);