4
votes

Comment modifier le sélecteur * de css via javascript ou jquery

Je voudrais savoir s'il est possible de modifier le sélecteur "*" de css au moyen de javascript ou jquery.

Par exemple, j'ai ce qui suit:

* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}

javascript jquery html css

2 commentaires

Vous pouvez ajouter une nouvelle règle par programme, mais il peut être simplement plus simple de définir cette règle sur un ancêtre commun, comme document.documentElement ou document.body puisque font-family est une propriété héritée.

document.body.childNodes

6 Réponses :

0
votes

Essayez ceci

$("*").css({"font-family": "your-font"});

1 commentaires

Merci beaucoup!

4
votes

Techniquement, * sélectionne tous les éléments. Donc, tous les éléments HTML devraient être dans le corps, non? Donc, lorsque vous le changez, changez le corps entier au lieu de tous les éléments.

$('*').CSS({'font-family':})

$('body').CSS({'font-family':})

1 commentaires

Je vous remercie! C'était la réponse la plus simple de toutes

2
votes

Vous pouvez faire ce qui suit en Javascript pur:

$("body").css("font-family","Arial");

Cela va parcourir chaque élément du DOM et ajouter le CSS.

Ou si vous utilisez Jquery , il existe une méthode plus simple pour le faire. Voir ci-dessous

  $("*").css("font-family","Arial");

ou simplement styliser le corps

 var everything = document.querySelectorAll("*");

 for(var i=0; i < everything.length; i++) {
     everything[i].style.fontFamily = "Arial";
     //add your CSS styles here
 }

0 commentaires

3
votes

Tout d'abord, vous devez sélectionner les éléments de DOM. Ensuite, nous pouvons faire tout ce que nous voulons en utilisant javascript comme suit.

getElementsByTagName ("*") retournera tous les éléments du DOM.

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

Réf: https: // www .w3schools.com / jsref / met_document_getelementsbytagname.asp

1 commentaires

Merci beaucoup! Votre réponse et celle d'un autre utilisateur que j'ai trouvée excellente

2
votes

Vous pouvez avoir accès à vos feuilles de style depuis JS et les modifier directement (pas en filtrant / en modifiant les nœuds html) plus d'infos ici .

Example test

<div style="font-family: 'Roboto'">No font change</div>

* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}

let rules=document.styleSheets[0].cssRules;

let rule= [...rules].find(r=> r.selectorText=="*" );

rule.style.fontFamily="cursive";

0 commentaires

3
votes

Juste la même chose que votre sélecteur serait * ...

Alors faites $ ("*"). css ({"font-family": "Arial"} ); si vous utilisez jQuery ...

Mais pur JavaScript, vous pouvez faire:

document.querySelectorAll("*").forEach(el => el.style.fontFamily = "Arial");

0 commentaires