如何使用 JavaScript 設置通用 CSS 選擇器？

Question

我經常使用 CSS 通用選擇器來重置 HTML 文檔中的尺寸：

* {
    border: 0;
    margin: 0; 
    padding: 0; 
}

這也可以用 JavaScript 來完成嗎？

對於普通的 HTML 元素，有style屬性。 但是如何與通用選擇器對話呢？

Answer 1

getElementsByTagName("*")將返回 DOM 中的所有元素。 然后你可以為集合中的每個元素設置樣式：

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

Answer 2

您不需要迭代所有元素。 您可以向瀏覽器的 CSS 引擎請求此操作。 類似的東西：

;(function(exports) {
  var style = document.querySelector("head")
                      .appendChild(document.createElement("style"));

  var styleSheet = document.styleSheets[document.styleSheets.length - 1];
  styleSheet.insertRule("* {}", 0);

  exports.universal = styleSheet.cssRules[0];
}(window));

從現在開始，您就有了一個window.universal對象，您可以使用它來設置所有元素的樣式。 例如：

window.universal.style.border = "1px solid red";

當然，您不需要在運行時創建<style>標簽。 你也可以在純 HTML 中使用它。

您可以運行此代碼段對其進行測試：

 ;(function(exports) { var style = document.querySelector("head") .appendChild(document.createElement("style")); var styleSheet = document.styleSheets[document.styleSheets.length - 1]; styleSheet.insertRule("* {}", 0); exports.universal = styleSheet.cssRules[0]; }(window)); console.log("universal" in window); // true window.universal.style.border = "1px solid red";

 <div> Hello <span>World</span> </div>

Answer 3

在原始 javascript 中，您可以執行以下操作：

document.getElementsByTagName('*')

但我不建議使用 js 將 css 添加到所有元素。

Answer 4

感謝VisioN的解決方案！ 我只記得你可以用新的 JavaScript 查詢選擇器 API 做同樣的事情：

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var element = allElements[i];        
  element.style.border = '0px';
  element.style.margin = '0px';
  element.style.padding = '0px';
}