5

私はよくCSSユニバーサルセレクターを使用してHTMLドキュメントのサイズをリセットします。

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

これはJavaScriptでも実行できますか？

通常のHTML要素には、styleプロパティがあります。しかし、ユニバーサルセレクターと話す方法は？

4

4 に答える 4

6

getElementsByTagName("*")DOMからすべての要素を返します。次に、コレクション内の各要素のスタイルを設定できます。

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}
于 2013-02-09T20:15:34.383 に答える
6

すべての要素を繰り返す必要はありません。この操作は、ブラウザの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>

于 2013-02-09T20:46:53.640 に答える
2

生のJavaScriptでは、これを行うことができます：

document.getElementsByTagName('*')

ただし、jsを使用してすべての要素にcssを追加することはお勧めしません。

于 2013-02-09T20:17:36.333 に答える
0

ソリューションを提供してくれたVisioNに感謝します。新しいJavaScriptQuerySelectorAPIでも同じことができることを思い出しました。

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';
}
于 2013-02-09T20:25:56.407 に答える