Question

我有父div标签和许多子标签..每个子标签的font-size是不同的。点击按钮时，每个子元素的字体大小应该增加1px的标签的字体大小......

我的尝试是：

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

Answer 1

像这样使用：

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

Answer 2

这个JavaScript函数可以满足您的需求。

我再次对此进行了更新，以正确定位所有子元素。

这也适用于内联样式。

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

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

jsfiddle示例

想要使用jquery更改子字体大小

2 个答案: