CSS-Attribute ändern

Question

Ich verwende Waypoints.js (http://imakewebthings.com/waypoints/api/waypoint/ - No-Framework-Abhängigkeit).

Jetzt möchte ich CSS-Attribute auf Wegpunkten ändern. Was wäre der beste Weg, um meinen Code auf modulare Weise zu handhaben?

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

Sie tun es so.

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 = ''; 

     } 
    } 

}); 

Wenn Sie eine console.dir tun, können Sie alle Elemente Eigenschaften sehen. Es ist eine gute Möglichkeit, Dinge zu bewerten, wenn Sie JavaScript verwenden.

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

console.dir(headerElem);