Как установить универсальный селектор CSS с помощью JavaScript?

Я часто использую универсальный селектор CSS для reset размеров в моем документе HTML:

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

Можно ли это сделать и с JavaScript?

Для обычных HTML-элементов существует свойство style. Но как говорить с универсальным селектором?

Ответы

Ответ 1

getElementsByTagName("*") вернет все элементы из DOM. Затем вы можете установить стили для каждого элемента в коллекции:

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

Ответ 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.

Ответ 3

В необработанном javascript вы можете сделать это:

document.getElementsByTagName('*')

но я бы не рекомендовал добавлять css ко всем элементам с помощью js.

Ответ 4

Спасибо VisioN за решение! Я просто помнил, что вы можете сделать то же самое с новым API-интерфейсом JavaScript Query Selector:

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