问题描述
我正在尝试创建一个正方形，而如果单击该正方形，则 body 元素的背景颜色会发生变化。但是代码似乎不起作用。 这是我使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
解决方法
您需要通过以下方式使用 JavaScript 执行此操作：
let sq = document.querySelector('.square');
sq.addEventListener('focus',()=>{
document.body.style.backgroundColor = 'yellow';
});.square {
width: 100px;
height: 100px;
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>我们开始！
在脚本中使用：
function myFunction() {
document.body.style.backgroundColor="黄色";
将预先确定的颜色更改为黄色
不要忘记通过按钮或链接
调用此功能根据需要自定义按钮/链接
检查下面的示例代码----运行代码片段
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>这是你想要的吗？我在 body 标签后添加了 [onclick="document.body.style.backgroundColor ='yellow']。希望它对你有用！
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>正如@AHaworth 指出的那样，不可能在层次结构中向上选择父元素。
可能最好的解决方案是使用 JavaScript，正如 Yushi 大师所回答的那样。
但是，如果您稍微更改布局，则有一种仅使用 CSS 的解决方案。使用 general sibling combinator 可以选择一个兄弟元素，如果它出现在 HTML 中 .square 之后的某处。因此，您可以添加一个新的 div 以将整个页面包裹在其中。并制作 .square position: absolute; 并将其放置在您需要的任何位置。根据您需要的页面布局，它可能适合您，也可能不适合您。
这是一个演示：
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>另外，一种方法是通过 JQuery。首先将 JQuery 插件添加到您的 HTML 代码中，然后将此代码添加到您的脚本中。
$(".square").click(function(){
$("body").css("background-color","yellow")
});