Can I change *(star) with JavaScript

Question

I want to access the css of * with JavaScript. I tried to access it the same way that I use for -

body{...} /css/ Can be accessed as

document.body.style.overlfow = hidden; but

*{...} /css/ is not accessible when using

document.*.style.overlfow = hidden; /JS/ doesn't work for the *. So how can i change its css?

  function myFunction() {
  document.getElementById("Intro").innerHTML= ('');
 // document.*.style.overflow ="visible";
  }

*{
 
 overflow: hidden;
 
}


.IntroText{
  position: absolute;
}


.IntroText{
 
 color: blue;
 margin: 20% auto 10% 10%;
 z-index: 100; 
}

.button {
    border: 5px solid blue;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
 position: absolute;
 color: white;
 margin: 43% 40% 5% 40%;
 z-index: 100; 
 
}

.IntroImg{
 position: relative;
 width: 110%;
 height: 110%;
}

h1,h3,h4,h5{
 
 color: blue;
 position: relative;
 text-transform: none;
 text-align: left;
 font-weight:lighter;
 font-family: 'Aria'; 
 font-size-adjust: 10%;
 
}

br{
   display: block;
   margin: 10000000px 0;
}

.Section{
 
 font-size: 100%;
 text-align: center;
 margin-left: 20%;
 margin-right: 20%;
 
}

.navbar{
 
 height: 3em;
 width: 100%;
 z-index: 200;
 background: #BBBBBB;
 position: fixed;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
 
 <title>Intro</title>
 
 <link href="Style.css" rel="stylesheet">
 <link href="Intro.css" rel="stylesheet">
 
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="css/jquery.bxslider.css" rel="stylesheet" />
 <link href="css/nav.css" rel="stylesheet">
 <link rel="shortcut icon" type="image/png" href="img/w3-favicon.png"/>
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="keywords" content="footer, contact, form, icons" />
 <link rel="stylesheet" href="css/demo.css">
 <link rel="stylesheet" href="css/footer-distributed-with-contact-form.css">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<script src="js/jquery-1.11.2.min.js">
     </script>
  <script src="js/main.js">
     </script>
<body>
 <!-- Navbar-->
 
 <div class="navbar">
 JJJJJ
 </div>
 
 
 <!-- Simple Intro-->
 <div class="IntroNeeded"> 
 <div id= "Intro">
 <div class="IntroText">
 <h2 style="font-size: 700%; font-weight: bolder; padding-bottom: 0; font-family: 'Arial'; margin-bottom: -0.3em;"> asdf. </h2>
 <h6> Untertext </h6>
 <p id="demo"></p>
 </div>
 <a class = "button" onclick="myFunction()" href="#bottom">Bottom</a>
 <img class="IntroImg" src="Stock.png" alt="Intro">
 </div>


 </div> 
 
 <div class="MainBody">
  <br>
  <div id="bottom">
   <a href="bottom" style="font-size: 300%; text-align: center; text-transform: uppercase;">
    Welcome
   </a> 
  </div>
  <h3 class="Section" style="margin-left: 5%; margin-right: 5%; color: black;"> Lorem ipsum dolor sit Lorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor rem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sit</h3>
 </div>

</body>
</html>

`Element.style` is the DOM API for `style` attribute. What you need is add style rules but not modify `style` attribute. — tsh, Jul 14 '17 at 08:02
Possible duplicate of https://stackoverflow.com/questions/16518015/select-all-elements-on-a-page — wickywills, Jul 14 '17 at 08:02
Possible Duplicate: https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript — tsh, Jul 14 '17 at 08:02
@quentin not a dupe. He want to select the universal selector. not comments. I think I have an answer — Sagar V, Jul 14 '17 at 08:05
Use `document.querySelectorAll('*')` if you want to target all elements. — abhishekkannojia, Jul 14 '17 at 08:06
@quentin: That dupe target is not what this question is about. I re-opened this. — Cerbrus, Jul 14 '17 at 08:06

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

* is the universal selector. Not an element.

It match every element and if any style is applied using *, it add the style to all elements.

If you want to access it, you should use document.querySelectorAll("*") because it will accept css selectors.

^{Thanks Cerbus for the info I missed}

Then Iterate over all elements and set style

Here is a sample snippet

document.querySelectorAll("*").forEach(x => x.style.border = "1px solid #000");

<div>t</div>
<div>TT</div>

It is similar to the * in Regular Expression which match everything

Update

If you applied style to *, it will be applied to everything including body, div, p, h's etc.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 14 '17 at 08:05

Sagar V

12,158
7
41
68

You are just setting background color on `` tag. which maybe not what OP want. – tsh Jul 14 '17 at 08:11
it is not set to html. It is for everything @tsh . do you have any valid reason for the downvote? – Sagar V Jul 14 '17 at 08:12
This answer doesn't explain that what the OP is trying to do, isn't possible. – Cerbrus Jul 14 '17 at 08:14
Please see the update part @Cerbrus it explains everything and OP accepted it so, I believe it solves OP's issue – Sagar V Jul 14 '17 at 08:14
That updated part doesn't explain that what the OP wants _isn't possible_. I sure hope you didn't just downvote my answer. – Cerbrus Jul 14 '17 at 08:15
1

@SagarV try to change `#f00` to something like `rgba(255, 0, 0, 0.1)`. If you are setting it to everything, the background for text should be darker than outside. – tsh Jul 14 '17 at 08:15
From this code on question `document.*.style.overlfow = hidden`, OP want to set style not get style. and it is possible. @Cerbrus – Sagar V Jul 14 '17 at 08:16
@tsh hmm set a color along with opacity – Sagar V Jul 14 '17 at 08:18
@Cerbrus and I hope you understand the reason for down vote is invalid – Sagar V Jul 14 '17 at 08:20
1

Besides, even if you want to _set_ the style for `*`, you'll still need to iterate over all elements, which you're not doing. – Cerbrus Jul 14 '17 at 08:21
@SagarV Compare your result with the one using css: https://codepen.io/anon/pen/owVxMY – tsh Jul 14 '17 at 08:22
@Cerbrus hmm I missed that part. Updated – Sagar V Jul 14 '17 at 08:25
1

de-down-voted. but also notice that NodeList.prototype.forEach has a very poor browser support till now. (Chrome 51, Firefox 50, Edge NO, Safari 10 from MDN). – tsh Jul 14 '17 at 08:34

Cerbrus · Answer 2 · 2017-07-14T08:24:44.963

If you want to set a style on all elements, the easiest thing to do is to add a css rule to your page. Since you're using jQuery already, this is pretty simple:

$("<style id='hideOverflow'>* { overflow: hidden; }</style>").appendTo("head");

This can be removed with:

$("#hideOverflow").remove();

Regarding reading styles, styles set through css rules can not be accessed like that, from JavaScript:

console.log('background: `' + document.getElementById('foo').style.background + '`');

#foo {
  width: 50px;
  height: 50px;
  background: red;
}

<div id="foo"></div>

As you can see, the background style isn't accessible in JS.

For the same reason, this won't work for your * style, regardless of how you'd access the proper element:
Any element on the page should have that style applied, but none of them expose that style through JS:

console.log('background: `' + document.querySelectorAll('*')[0].style.background + '`');
console.log('background: `' + document.querySelectorAll('*')[1].style.background + '`');
console.log('background: `' + document.querySelectorAll('*')[2].style.background + '`');

* {
  background: red;
}

.block {
  width: 50px;
  height: 50px;
  display: block;
}

<div class="block"></div>
<span class="block"></span>
<h1 class="block"></h1>

OP want to set style not get the existing style – Sagar V Jul 14 '17 at 08:19 — Sagar V, Jul 14 '17 at 08:19

Can I change *(star) with JavaScript

2 Answers2

Update