Javascript 在html中单击父元素时更改子元素的颜色_Javascript_Jquery_Html_Css

Javascript 在html中单击父元素时更改子元素的颜色

javascript jquery html css

Javascript 在html中单击父元素时更改子元素的颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在给定的代码段中，我已经给出了代码，我希望再次单击父div时，默认颜色应该应用于子元素。但条件是，代码应该尽可能少需要没有.toggleclass、.toggle、.addclass、.removeclass的解决方案（如果可能）多谢各位 *编辑非常感谢各位宝贵的回答。我很感激。座右铭=>改进您的知识库 $（'li'）。单击（函数（）{ $（this.children（）.css）({ “颜色”：“红色”， “边框”：“2倍纯红” }); }) 祖先*{ 显示：块；边框：2件纯色浅灰色；

在给定的代码段中，我已经给出了代码，我希望再次单击父div时，默认颜色应该应用于子元素。但条件是，代码应该尽可能少

需要没有.toggleclass、.toggle、.addclass、.removeclass的解决方案（如果可能）

多谢各位

*编辑非常感谢各位宝贵的回答。我很感激。座右铭=>改进您的知识库

$（'li'）。单击（函数（）{
$（this.children（）.css）({
“颜色”：“红色”，
“边框”：“2倍纯红”
});
})

祖先*{
显示：块；
边框：2件纯色浅灰色；
颜色：浅灰色；
填充物：5px；
利润率：15px；
}


身体（曾曾祖父母）
分区（曾祖父母）
ul（祖父母）
李（直接家长）
跨度

李（直接家长）
跨度

李（直接家长）
跨度

因为您使用的是jQuery，所以可以使用

.toggleClass

在两个CSS类之间切换，一个是新颜色，另一个是默认颜色。

这里是

切换类的参考，您可以看到第一个演示示例正在做我理解您想要做的事情：
您可以使用.addClass
函数
$('.parentClass').addClass("new-class-for-parent");

编辑：
使用“需要一个没有.toggleclass、.toggle、.addclass、.removeclass的解决方案（如果可能）”，您还可以像这样使用.prop
函数：
$('.parentClass').prop("style","color:#f0f0f0;width:100px;");
//or
$('#parentClass').prop("class","class-for-this");

您可以检查元素属性“样式”以确定是否应用了颜色，请检查下面的代码-
$('li').click(function(){
    var is_color = $(this).children().attr('style');

    if (typeof is_color !== typeof undefined && is_color !== false) {
        $(this).children().removeAttr("style");
    }
    else {
        $(this).children().css({"color": "red", "border": "2px solid red"});
    }   
})

请检查此代码是否有助于您无需添加或删除任何类或切换。勾选这个（）

.祖先*{
显示：块；
边框：2件纯色浅灰色；
颜色：浅灰色；
填充物：5px；
利润率：15px；
}
身体（曾曾祖父母）
分区（曾祖父母）
ul（祖父母）
李（直接家长）
跨度

李（直接家长）
跨度

李（直接家长）
跨度


$（文档）.ready（函数（）{
$（'li'）。单击（函数（）{
if（$（this）.children（）.attr（“样式”）！=“”）{
$（this.children（）；
}否则{
$（this.children（）.css（{“color”：“red”，“border”：“2px solid red”}）；
}
})
})
使用切换类（）
切换多个类。您可以使用下面的代码，它可以根据您的需要正常工作

$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
$（“span”）.toggleClass（“子”）；
});
});
祖先*{
显示：块；
边框：2件纯色浅灰色；
颜色：浅灰色；
填充物：5px；
利润率：15px；
}
.孩子{
颜色：红色；
边框：2倍纯红；
}

文件
分区（曾祖父母）
ul（祖父母）
李（直接家长）
跨度

李（直接家长）
跨度

李（直接家长）
跨度


如果您愿意，您可以不使用这样的类

$（'li'）。单击（函数（）{
$（this.children（）.attr（'data-red'，'true'）；
})
祖先*{
显示：块；
边框：2件纯色浅灰色；
颜色：浅灰色；
填充物：5px；
利润率：15px；
}
[data red=“true”]{
颜色：红色；
边框：2倍纯红；
}

身体（曾曾祖父母）
分区（曾祖父母）
ul（祖父母）
李（直接家长）
跨度

李（直接家长）
跨度

李（直接家长）
跨度


需要一个不带.toggleclass、.toggle、.addclass、.removeclass的解决方案（如果可能）。为什么要直接应用内联样式而不使用类（带.addclass或.removeclass或类似功能）？
   <!DOCTYPE html>
    <html>
     <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgrey;
      color: lightgrey;
      padding: 5px;
      margin: 15px;
    }
    </style>
    </head>

    <body class="ancestors">body (great-great-grandparent)
      <div style="width:500px;">div (great-grandparent)
        <ul>ul (grandparent)  
          <li>li (direct parent)
            <span>span</span>
          </li>
          <li>li (direct parent)
            <span>span</span>
          </li>
          <li>li (direct parent)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    </html>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li').click(function(){
          if ($(this).children().attr("style") != "") {
            $(this).children().attr("style","");
          }else{
            $(this).children().css({"color": "red", "border": "2px solid red"});
          }
        })
      })
    </script>