如何通过javascript或jquery修改css的selector *

Question

I would like to know if it is possible to modify the "*" selector of css by means of javascript or jquery.

For example, I have the following:

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

And I need to modify by means of javascript or jquery "font-family".

Answer 1

Technically, * selects all elements. So, all HTML elements should be in the body, right? So, when you change it, change the whole body instead of all elements.

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

or

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

Answer 2

First of all you should select the elements of DOM. Then we can do anything what we want by using javascript as follows.

getElementsByTagName("*") will return all elements from 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 = ...
}

Ref : https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

Answer 3

Just the same stuff your selector would be * ...

So do $("*").css({"font-family": "Arial"}); if using jQuery...

But pure JavaScript, you can do:

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

Answer 4

You could do the following in pure Javascript:

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

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

This will loop through every element in the DOM and add the CSS.

Or if you are using Jquery, there is way easier method to do it. See below

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

or just simply style the body

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

Answer 5

You can have access to your style sheets fom JS and change them directly (not by filter/change any html nodes) more info here .

 let rules=document.styleSheets[0].cssRules; let rule= [...rules].find(r=> r.selectorText=="*" ); rule.style.fontFamily="cursive"; 

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

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

Answer 6

尝试这个

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