jQuery改变单个元素属性问题

简介: div嵌套div改变外层div字体颜色保留内层div字体颜色出现同时改变的情况解决方案
+关注继续查看

今天在做练习的时候,遇到了一个问题:
我做了一个div的嵌套,外层div包裹内层div,在完成其他功能的时候都正常,但是到了改变div内文字颜色的时候出了问题,我只打算改变外层div的文字颜色为白色,但当我点击按钮时,内外层文字颜色同时改变了,我试过将内层文字的颜色清楚,但是不行,还是被改变了。
jQuery元素筛选 - 用户配置 1 - Microsoft​ Edge 2023_9_27 1_21_25.png
对应的html代码为:

<p>div控制器</p>
    <button id="divbtn1">改变内层div的颜色为黄色</button>
    <button id="divbtn2">改变内层div文字居中</button>
    <button id="divbtn3">改变外层div字体颜色为白色</button>

    <hr>
    <div id="divfarther">这是最外层的div
        <div id="chiden">这是内层div</div>
    </div>

对应的jQuery代码为:


$(document).ready(function(){
   



            $("#divbtn3").click(
                function(){
   


                    $("#divfarther").css("color","white");

                    alert("文字颜色已更改");
                }
            );

            $("#divbtn1").click(function(){
   

                $("#chiden").css("background-color","yellow");
                alert("更改完成")
            });

            $("#divbtn2").click(
                function(){
   

                    $("#chiden").css("text-align","center");
                    alert("文字已居中");
                }
            );

        });

或:


$(document).ready(function(){
   



            $("#divbtn3").click(
                function(){
   


                    $("#divfarther").css("color","white");
                    $("#chiden").css("color","");
                    alert("文字颜色已更改");
                }
            );

            $("#divbtn1").click(function(){
   

                $("#chiden").css("background-color","yellow");
                alert("更改完成")
            });

            $("#divbtn2").click(
                function(){
   

                    $("#chiden").css("text-align","center");
                    alert("文字已居中");
                }
            );

        });

以上代码都不行,因为css又继承性,所以要把元素设置为默认状态
在chiden的color上改为initial
如以下jQuery代码


$(document).ready(function(){
   



            $("#divbtn3").click(
                function(){
   


                    $("#divfarther").css("color","white");
                    $("#divfarther > #chiden").css("color","initial");

                    alert("文字颜色已更改");
                }
            );

            $("#divbtn1").click(function(){
   

                $("#chiden").css("background-color","yellow");
                alert("更改完成")
            });

            $("#divbtn2").click(
                function(){
   

                    $("#chiden").css("text-align","center");
                    alert("文字已居中");
                }
            );

        });

以下是效果图
jQuery元素筛选 和另外 1 个页面 - 用户配置 1 - Microsoft​ Edge 2023_9_27 1_19_50.png
完美解决!

目录
相关文章
|
27天前
|
JavaScript
jquery给元素设置属性
jquery给元素设置属性
|
27天前
|
JavaScript
jQuery 设置内容和属性
jQuery 设置内容和属性
|
2月前
|
JSON JavaScript 前端开发
jQuery的$工具方法&CSS属性及方法
jQuery的$工具方法&CSS属性及方法
|
2月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
19 0
|
2月前
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
15 0
|
2月前
|
JavaScript 前端开发
前端基础 -JQuery之 属性过滤选择器
前端基础 -JQuery之 属性过滤选择器
12 0
|
2月前
|
JavaScript 前端开发 API
jQuery的attr()方法和JavaScript的属性操作
jQuery的attr()方法和JavaScript的属性操作
25 0
|
2月前
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
3月前
|
JavaScript
jQuery 属性操作 attr()、removeAttr()、prop()
jQuery 属性操作 attr()、removeAttr()、prop()
26 0
jQuery 属性操作 attr()、removeAttr()、prop()
|
3月前
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
热门文章
最新文章
相关产品
云迁移中心
相关课程
更多
推荐文章
更多