So fügen Sie Elementen in JQuery Breite hinzu-Front-End-Fragen und Antworten-php.cn

So fügen Sie Elementen in JQuery Breite hinzu

青灯夜游

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

Original

2700 Leute haben es durchsucht

Drei Methoden: 1. Verwenden Sie width(), um die Elementbreite festzulegen. Die Syntax lautet „$(selector).width(new value)“, der neue Wert ist größer als der ursprüngliche Breitenwert. 2. Verwenden Sie css(), um einen neuen Wert für das Breitenattribut des Elements festzulegen, mit der Syntax „$(selector).css(“width“, „new value“)“. 3. Verwenden Sie attr(), um das Stilattribut zu steuern und einen neuen Breitenstil für das Element festzulegen. Die Syntax lautet „$(selector).attr(“style“,“width: new value“).

So fügen Sie Elementen in JQuery Breite hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

Methode 1: Verwenden Sie die Funktion width(), um die Breite zu erhöhen.

width() ist eine integrierte Funktion, die die Breite von Elementen bearbeitet und die Breite übereinstimmender Elemente zurückgeben oder festlegen kann.

Übergeben Sie Parameter an width(), um die Breite aller übereinstimmenden Elemente festzulegen.

$(selector).width(length)

Nach dem Login kopieren

Parameter	Beschreibung
Länge	Optional. Gibt die Breite des Elements an. Wenn keine Längeneinheit angegeben ist, wird die Standard-Px-Einheit verwendet.

Parameter

Beschreibung

Länge

Optional. Gibt die Breite des Elements an.

Wenn keine Längeneinheit angegeben ist, wird die Standard-Px-Einheit verwendet.

Beispiel: Erhöhen Sie die Breite des Bildelements. Der Wert des Parameters „width()“ muss größer als die ursprüngliche Breite eingestellt werden.

<!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="So fügen Sie Elementen in JQuery Breite hinzu" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

Nach dem Login kopieren

So fügen Sie Elementen in JQuery Breite hinzu

Methode 2: Verwenden Sie die Funktion css(), um die Breite zu erhöhen.

css() ist eine integrierte Funktion, die mit Elementattributen arbeitet und ein oder mehrere Stilattribute von zurückgeben oder festlegen kann das passende Element.

Verwenden Sie einfach css(), um einen neuen Wert für das Breitenattribut des Elements festzulegen (der neue Wert ist größer als der alte Wert).

Beispiel: Erhöhen Sie die Breite des p-Elements Element.

Sie müssen nur attr() verwenden, um den Stilattributwert zu steuern und einen neuen Breitenstil für das Element festzulegen (der neue Wert ist größer als der alte Wert).

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

Nach dem Login kopieren

So fügen Sie Elementen in JQuery Breite hinzu 【Empfohlenes Lernen:

jQuery-Video-Tutorial

, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo fügen Sie Elementen in JQuery Breite hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!