如果另一个div元素集中在css中，如何更改不同元素的属性答案

【问题标题】：how to change properties of a different element if another div element is focused in css如果另一个div元素集中在css中，如何更改不同元素的属性
【发布时间】：2021-05-29 02:42:37
【问题描述】：

我正在尝试创建一个正方形，而如果单击该正方形，则主体元素的背景颜色会发生变化。但是代码似乎不起作用。这是我使用的代码：

<!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;
    }

【问题讨论】：

body 是 square 的父级，而不是相反。 CSS 不会让您以您需要的方式“备份”，而不必以您拥有的方式执行此操作。

标签： html css focus background-color pseudo-class

【解决方案1】：

您需要通过以下方式使用 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>

【讨论】：

【解决方案2】：

我们开始！

在脚本中使用它：

函数 myFunction() {
document.body.style.backgroundColor="黄色";

它将预先确定的颜色变为黄色

不要忘记通过按钮或链接调用这个函数

根据需要自定义按钮/链接

查看下面的示例代码----运行sn-p代码

<!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>

【讨论】：

【解决方案3】：

正如@AHaworth 指出的那样，不可能在层次结构中向上选择父元素。

可能最好的解决方案是使用御史大师回答的 JavaScript。

但是，如果您稍微更改布局，就会有一种纯 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>

【讨论】：

【解决方案4】：

另外，一种方法是通过 JQuery。首先将 JQuery 插件添加到您的 HTML 代码中，然后将此代码添加到您的脚本中。

$(".square").click(function(){
    $("body").css("background-color", "yellow")
});

【讨论】：

【解决方案5】：

这是你想要的吗？我在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>

【讨论】：

这可能行不通，因为我猜他们需要在用户点击离开或关注另一个元素时反转颜色。请注意，只需更新您的代码以将“onclick”添加到 square div 而不是正文。因为他们希望在单击而不是在身体上的正方形时改变颜色。
谢谢@VakoShvili。我已经添加到方形 div，但不确定在发布之前我做了多少编辑。感谢您指出这一点！