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

如何解决如果另一个 div 元素聚焦在 css 中，如何更改不同元素的属性

我正在尝试创建一个正方形，而如果单击该正方形，则 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")
});

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

如何解决如果另一个 div 元素聚焦在 css 中，如何更改不同元素的属性

解决方法

我们开始！

相关推荐