想要使用 jquery 更改孩子的字体大小答案

【问题标题】：Want to change the children font size using jquery想要使用 jquery 更改孩子的字体大小
【发布时间】：2014-04-23 15:31:39
【问题描述】：

我有父 div 标签和许多子标签。每个子标签的字体大小都不同。单击按钮时，每个子元素的字体大小应增加该标签字体大小的 1 像素.....

我的尝试是：

       <html>
       <head>
        <style>
          .descendants *
          {
              display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
       </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">

        $(document).ready(function () {
            $(".baster").click(function () {
                //       var mas;
                //        for  mas in $(".descendants").children() 
                //        {
                //            var fontsize= parseInt($(".descendants").children().css("font-   size"));
                //         }
                ////            alert(fontsize);    
                ////            fontSize = fontSize + 1 + "px";
                //            $(".descendants").children().css({ "font-size": "font-size"+10      });
                //            $(".descendants").css({ "font-size": "font-size"+10 });
                //            $(".descendants").children().each(function () {
                $('.descendants *').css('font-size', '+=1px');
                //                var size = parseInt($(this).css("font-size"));
                //                $(this).css("font-size", size + 1 + "pt");
                //                var size1 = parseInt($(this).children().css("font-size"));
                //                $(this).children().css("font-size", size1 + 1 + "pt");

                //                var myclass = jQuery('.myclass');


            });

            //            var size1 = parseInt($(".descendants").css("font-size"));
            //            $(".descendants").css("font-size", size1 + 1 + "pt");
            //             $(".descendants").children(this).css("font-size", size + 1 +  "pt");
        });
        //    });

    </script>

     </head>
     <body>
     <form runat="server">
     <div class="descendants" style="width: 500px; font-size: 20px;">
        div (current element)
        <div>
            p (child)
            <div style="font-size: 40px;">
                span (grandchild)</div>
            <div>
                p (child)
                <div style="font-size: 20px;">
                    span (grandchild)</div>
            </div>
        </div>
     </div>
     <input id="Button1" type="button" class="baster" value="click" runat="server">
     </form>
     </body>
     </html>

【问题讨论】：

标签： jquery asp.net font-size

【解决方案1】：

这样使用：

$('#parent *').css('font-size','+=1px');

【讨论】：

您正在使用.baster click 功能两次删除最后一个。

【解决方案2】：

此 JavaScript 函数将满足您的需求。

我已再次更新此内容以正确定位所有子元素。

这也适用于内联样式。

$('.descendants').find('*').click(function () {
    increaseSize();
});

function increaseSize() {
    $('.descendants').find('*').each(function () {
        $(this).css({
            'font-size': parseFloat($(this).css('font-size')) + 1
        });
    });
}

jsfiddle 示例

【讨论】：

我需要在每次单击按钮时增加所有子元素的字体大小..
我已经编辑了代码和 jsfiddle 示例。它现在将增长父 div 的所有子元素
很棒的工作，但在我的场景中，一些子元素具有内联样式的字体大小。所以这不适用于具有内联字体大小的元素..
@user3373828 我已经更新了答案。此代码也适用于内联样式。
@user3373828 你不接受这个答案有什么原因吗？