Question

我想用JavaScript访问*的css。我尝试以与我用于 -

相同的方式访问它

body {...} / css / 可以作为

访问

document.body.style.overlfow = hidden; 但

* {...} / css / 使用

时无法访问

document。*。style.overlfow = hidden; / JS / 不适用于*。那我怎么能改变它的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>

Answer 1

*是通用选择器。不是元素。

它匹配每个元素，如果使用*应用任何样式，它会将样式添加到所有元素。

如果你想访问它，你应该使用document.querySelectorAll("*")，因为它会接受css选择器。

^{感谢Cerbus我错过的信息}

然后迭代所有元素并设置样式

以下是一个示例代码段

＆＃13;

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

＆＃13;

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

＆＃13;

它类似于正则表达式中的*，它匹配所有内容

更新

如果您将样式应用于*，它将应用于所有内容，包括正文，div，p，h等。

Answer 2

如果您想在所有元素上设置样式，最简单的方法是在页面中添加css规则。由于您已经使用了jQuery，因此非常简单：

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

可以使用以下方法删除：

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

关于阅读样式，通过css规则设置的样式可以从JavaScript中 而不是 进行访问：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，JS中无法访问背景样式。

出于同样的原因，无论您如何访问正确的元素，这都不适用于您的*样式：
页面上的任何元素都应该应用该样式，但它们都没有通过JS公开该样式：

＆＃13;

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

＆＃13;

* {
  background: red;
}

.block {
  width: 50px;
  height: 50px;
  display: block;
}

＆＃13;

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

＆＃13;

我可以用JavaScript更改*（星标）

2 个答案:

更新