與getElementsByClassName方法

Question

取代的getElementById我想國防部的的JavaScript下面通過class name選擇，而不是element id：

https://github.com/sarathsaleem/grained/blob/master/grained.js

然後理想初始化，就像這樣：

grained(".classname", options); 

Answer 1

Sarath Saleem的grained.js的這個修改版本獲得了具有給定類名稱選擇器（即'.foo'）的所有元素，併爲它們指定了noi se背景。我還沒有很好地測試過這個代碼，所以在效率方面絕對不是生產質量。關鍵是將element變量更改爲elements，並使用document.getElementsByClassName其中最新命名的elements變量已定義。這將返回所有HTML元素與給定類的HTMLCollection（即'foo'）。然後，在設置元素的position和overflow屬性的部分中，使用for循環並遍歷HTMLCollection，以便爲給定類中找到的每個元素設置position和overflow屬性。
注意：在grained.js文件的底部是我稱之爲粒度函數的地方。

此外，我調整了以前命名爲elementId變量的位置，以使用基於給定類名的新變量elementClass。

您可以在grained.js iife之後的任何位置執行此操作，因爲它在之後的全局命名空間中。

/*! Grained.js 
 
* Author : Sarath Saleem - https://github.com/sarathsaleem 
 
* MIT license: http://opensource.org/licenses/MIT 
 
* GitHub : https://github.com/sarathsaleem/grained 
 
* v0.0.1 
 
*/ 
 
(function (window, doc) { 
 

 
    "use strict"; 
 

 
    function grained(ele, opt) { 
 

 
     var elements = null, 
 
      elementClass = null, 
 
      selectorElement = null; 
 

 
     //1 
 
     if (typeof ele === 'string') { 
 
      elements = doc.getElementsByClassName(ele.split('.')[1]); 
 
     } 
 
     //1 
 
     if (!elements) { 
 
      console.error('Grained: cannot find any elements with class ' + ele); 
 
      return; 
 
     } else { 
 
      elementClass = elements[0].className; 
 
     } 
 

 
     var elementsLength = elements.length 
 
     for(var i = 0; i < elementsLength; i++) { 
 
     //set style for parent 
 
     if (elements[i].style.position !== 'absolute') { 
 
      elements[i].style.position = 'relative'; 
 
     } 
 
     elements[i].style.overflow = 'hidden'; 
 
     }; 
 

 
     var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"]; 
 

 
     //default option values 
 
     var options = { 
 
      animate: true, 
 
      patternWidth: 100, 
 
      patternHeight: 100, 
 
      grainOpacity: 0.1, 
 
      grainDensity: 1, 
 
      grainWidth: 1, 
 
      grainHeight: 1, 
 
      grainChaos: 0.5, 
 
      grainSpeed: 20 
 

 
     }; 
 

 
     Object.keys(opt).forEach(function (key) { 
 
      options[key] = opt[key]; 
 
     }); 
 

 

 
     var generateNoise = function() { 
 
      var canvas = doc.createElement('canvas'); 
 
      var ctx = canvas.getContext('2d'); 
 
      canvas.width = options.patternWidth; 
 
      canvas.height = options.patternHeight; 
 
      for (var w = 0; w < options.patternWidth; w += options.grainDensity) { 
 
       for (var h = 0; h < options.patternHeight; h += options.grainDensity) { 
 
        var rgb = Math.random() * 256 | 0; 
 
        ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')'; 
 
        ctx.fillRect(w, h, options.grainWidth, options.grainHeight); 
 
       } 
 
      } 
 
      return canvas.toDataURL('image/png'); 
 
     }; 
 

 
     function addCSSRule(sheet, selector, rules, index) { 
 
      var ins = ''; 
 
      if (selector.length) { 
 
       ins = selector + "{" + rules + "}"; 
 
      } else { 
 
       ins = rules; 
 
      } 
 

 
      if ("insertRule" in sheet) { 
 
       sheet.insertRule(ins, index); 
 
      } else if ("addRule" in sheet) { 
 
       sheet.addRule(selector, rules, index); 
 
      } 
 
     } 
 

 

 
     var noise = generateNoise(); 
 

 
     var animation = '', 
 
      keyFrames = ['0%:-10%,10%', '10%:-25%,0%', '20%:-30%,10%', '30%:-30%,30%', '40%::-20%,20%', '50%:-15%,10%', '60%:-20%,20%', '70%:-5%,20%', '80%:-25%,5%', '90%:-30%,25%', '100%:-10%,10%']; 
 

 
     var pre = prefixes.length; 
 
     while (pre--) { 
 
      animation += '@' + prefixes[pre] + 'keyframes grained{'; 
 
      for (var key = 0; key < keyFrames.length; key++) { 
 
       var keyVal = keyFrames[key].split(':'); 
 
       animation += keyVal[0] + '{'; 
 
       animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');'; 
 
       animation += '}'; 
 
      } 
 
      animation += '}'; 
 
     } 
 

 
     //add animation keyframe 
 
     var animationAdded = doc.getElementById('grained-animation'); 
 
     if (animationAdded) { 
 
      animationAdded.parentElement.removeChild(animationAdded); 
 
     } 
 
     var style = doc.createElement("style"); 
 
     style.type = "text/css"; 
 
     style.id = 'grained-animation'; 
 
     style.innerHTML = animation; 
 
     doc.body.appendChild(style); 
 

 
     //add custimozed style 
 
     var styleAdded = doc.getElementById('grained-animation-' + elementClass); 
 
     if (styleAdded) { 
 
      styleAdded.parentElement.removeChild(styleAdded); 
 
     } 
 

 
     style = doc.createElement("style"); 
 
     style.type = "text/css"; 
 
     style.id = 'grained-animation-' + elementClass; 
 
     doc.body.appendChild(style); 
 

 
     var rule = 'background-image: url(' + noise + ');'; 
 
     rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;'; 
 
     pre = prefixes.length; 
 
     if (options.animate) { 
 
      while (pre--) { 
 
       rule += prefixes[pre] + 'animation-name:grained;'; 
 
       rule += prefixes[pre] + 'animation-iteration-count: infinite;'; 
 
       rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;'; 
 
       rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);'; 
 
      } 
 
     } 
 

 
     //selecter element to add grains 
 
     selectorElement = '.' + elementClass + '::before'; 
 

 

 
     addCSSRule(style.sheet, selectorElement, rule, 0); 
 

 

 
    } 
 

 
    window.grained = grained; 
 
    //END 
 
})(window, document); 
 

 
grained('.foo', {});

<!doctype html> 
 
<html> 
 
    <head> 
 
     <title>Example</title> 
 
     <style> 
 
     .foo { 
 
      height: 100px; 
 
      width: 100px; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="foo"> 
 
     <div class="contents"> 
 
      <p>Hello World</p> 
 
     </div> 
 
     </div> 
 
     <p>No Noise For Me!</p> 
 
     <div class="foo"> 
 
     <div class="contents"> 
 
      <p>Hello World</p> 
 
     </div> 
 
     </div> 
 

 
    <script type="text/javascript" src="grained.js"></script> 
 
    <script type="text/javascript" src="index.js"></script> 
 
    </body> 
 
</html>

希望這有助於！如果您有任何疑問，請詢問！我喜歡幫助：D。