Bagaimana untuk menambah lebar kepada elemen dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah lebar kepada elemen dalam jquery

青灯夜游

Lepaskan： 2022-09-27 17:42:59

asal

2673 orang telah melayarinya

Tiga kaedah: 1. Gunakan width() untuk menetapkan lebar elemen, sintaks ialah "$(selector).width(new value)", nilai baharu lebih besar daripada nilai lebar asal. 2. Gunakan css() untuk menetapkan nilai baharu bagi atribut lebar elemen, dengan sintaks "$(selector).css("width","new value"". 3. Gunakan attr() untuk mengawal atribut gaya dan tetapkan gaya lebar baharu untuk elemen Sintaks ialah "$(selector).attr("style","width: new value"".

Bagaimana untuk menambah lebar kepada elemen dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.1, komputer Dell G3.

Kaedah 1: Gunakan fungsi width() untuk meningkatkan lebar

width() ialah fungsi terbina dalam yang beroperasi pada lebar elemen dan boleh mengembalikan atau Menetapkan lebar elemen yang dipadankan.

Lepaskan parameter kepada width() untuk menetapkan lebar semua elemen padanan.

$(selector).width(length)

Salin selepas log masuk

Parameter

Penerangan

panjang

参数

描述

length

可选。规定元素的宽度。

如果没有规定长度单位，则使用默认的 px 单位。

Pilihan. Menentukan lebar elemen.

Jika tiada unit panjang dinyatakan, unit px lalai digunakan.

Contoh: Tingkatkan lebar elemen gambar

<!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="Bagaimana untuk menambah lebar kepada elemen dalam jquery" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

Salin selepas log masuk

Nilai parameter width() perlu ditetapkan kepada lebar asal Jadilah besar. Bagaimana untuk menambah lebar kepada elemen dalam jquery

Kaedah 2: Gunakan fungsi css() untuk meningkatkan lebar

css () Merupakan fungsi terbina dalam yang beroperasi pada atribut elemen dan boleh mengembalikan atau menetapkan satu atau lebih atribut gaya elemen padanan.

Hanya gunakan css() untuk menetapkan nilai baharu bagi atribut lebar elemen (nilai baharu lebih besar daripada nilai lama).

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

Salin selepas log masuk

Contoh: Tingkatkan lebar elemen p

Bagaimana untuk menambah lebar kepada elemen dalam jquery

Kaedah 3: Gunakan attr() berfungsi untuk meningkatkan Lebar

kaedah attr() menetapkan atau mengembalikan nilai atribut bagi elemen yang dipilih.

<!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="Bagaimana untuk menambah lebar kepada elemen dalam jquery" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

Salin selepas log masuk

Anda hanya perlu menggunakan attr() untuk mengawal nilai atribut gaya dan menetapkan gaya lebar baharu untuk elemen (nilai baharu lebih besar daripada nilai lama). Bagaimana untuk menambah lebar kepada elemen dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery

, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menambah lebar kepada elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!