Question

如何动态设置高度和宽度的属性？图像是动态提供的（随机照片），但并不总是相同的大小。我想将实际的高度和宽度值插入到标记中，这样我们就可以在Web性能报告上获得更好的分数（因为未指定图像大小而被标记为低）。这可以通过jQuery完成吗？

Answer 1

以下代码使用jQuery更改width宽度height内所有图片的<div>和class="images"。将此代码原样复制到新页面中了解它是如何工作的，然后应用于您自己的项目：

<head runat="server">
    <title></title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#btnMakeImagesSmaller").click(function () {
                MakeAllImagesSmaller();
            });

            function MakeAllImagesSmaller() {
                debugger;

                var images = $(".images img");

                for (var i = 0; i < images.length; i++) {
                    ChangeSize(images[i], "100px;", "100px");
                }
            }

            function ChangeSize(element, width, height) {
                $(element).css("height", height);
                $(element).css("width", width);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnMakeImagesSmaller" value="Make Images Smaller" />
        <div class="images">
            <img src="http://science-all.com/images/wallpapers/fruits-images/fruits-images-4.jpg" />
            <img src="http://blogs.extension.iastate.edu/foodsavings/files/2014/06/vegetables-variety.jpg" />
            <img src="http://gilowveld.sites.caxton.co.za/wp-content/uploads/sites/97/2016/03/Dairy-products.jpg" />
        </div>
    </form>
</body>

动态填充图像大小属性？

1 个答案: