首頁 > 文章 > web前端 > jquery怎麼給元素增加寬度

jquery怎麼給元素增加寬度

青灯夜游原創: 2022-09-27 17:42:592654瀏覽

三種方法：1、用width()設定元素寬度，語法“$(selector).width(新值)”，新值要比原寬度值大。 2.用css()給元素的width屬性設定新值，語法「$(selector).css("width","新值")」。 3.用attr()控制style屬性，為元素設定新width樣式，語法「$(selector).attr("style","width:新值")」。

jquery怎麼給元素增加寬度

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

方法1：利用width()函數來增加寬度

#width()是操作元素寬度的內建函數，可以傳回或設定匹配元素的寬度。

給width()傳遞參數即可設定所有符合元素的寬度。

$(selector).width(length)

參數	描述
#length

參數

描述

#length

#可選。規定元素的寬度。

jquery怎麼給元素增加寬度如果沒有規定長度單位，則使用預設的 px 單位。

範例：增加圖片元素的寬度

#width()的參數值需要設定的比原始寬度更大。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").width("200px");
                });
            });
        </script>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="jquery怎麼給元素增加寬度" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

jquery怎麼給元素增加寬度方法2：利用css()函數來增加寬度

css()是操作元素屬性的內建函數，可以傳回或設定匹配的元素的一個或多個樣式屬性。 只需要使用css()為元素的width屬性設定新值即可（新值要比舊值大）。

範例：增加p元素的寬度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("p").width("350px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <p>测试段落</p>
        <button>增加p元素的宽度</button>
    </body>
</html>

jquery怎麼給元素增加寬度

#方法3：利用attr()函數來增加寬度

attr() 方法設定或傳回被選元素的屬性值。 ######只需要利用attr()控制style屬性值，而為元素設定新width樣式即可（新值要比舊值大）。 ###

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").attr("style","width:250px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="jquery怎麼給元素增加寬度" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

############【推薦學習：###jQuery影片教學###、###web前端影片###】###

以上是jquery怎麼給元素增加寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery怎麼隱藏option下一篇：jquery怎麼隱藏option

看更多