Eine vollständige Anleitung zu CSS-Stilattributen css() und width() in jQuery

1. Grundlegende Verwendung von css():

1.1 CSS-Eigenschaften abrufen

1.1.1 Einen einzelnen Attributwert abrufen (eine Zeichenfolge übergeben)

div {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: rot;
}

<div>div1</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<Skript>
    Konsole.log( $('div').css('Breite') );
    Konsole.log( $('div').css('Hintergrund') );
</Skript>

Auswirkung: Da es sich beim Hintergrund um ein zusammengesetztes Attribut handelt, werden beim Abrufen seines Werts alle seine Attribute aufgelistet.

1.1.2 Mehrere Attributwerte abrufen (mithilfe von Arrays)

Konsole.log( $('div').css(['Breite', 'Hintergrund']) );

Wirkung: Die erhaltenen mehreren Attributwerte werden in Form von Objekten zurückgegeben

1.2 Festlegen von CSS-Eigenschaften

1.2.1 Festlegen eines einzelnen Eigenschaftswerts (mithilfe einer Zeichenfolge)

$('div').css('Farbe', 'weiß');

Effekt: Die Schrift wird weiß

1.2.2 Festlegen mehrerer Eigenschaftswerte (mithilfe von Objekten)

$('div').css({
    Farbe: 'weiß',
    Breite: '200px'
    //Sie können hier „200“, „200px“ oder 200 schreiben, die Standardeinheit ist Pixel});

Effekt: Die Schriftfarbe ist weiß und die Div-Breite beträgt 200px

1.2.3 Demo: Jedes Mal, wenn Sie auf ein Div klicken, erhöht sich die Breite um 100 Pixel

$('div').klick(
    $(diese).css({
    width: '+=100'}) // Automatisches Abrufen des aktuellen Breitenattributs und Hinzufügen von 100 Pixeln
)

Wirkung:

2. Grundlegende Verwendung der width()-Reihe (dasselbe gilt für die height()-Reihe)

2.1 Breite()

2.1.1 Breitenwert abrufen

Im Vergleich zu dom.css('width') ist das Ergebnis von css('width') eine Zeichenfolge, die Pixelwert und Einheit enthält.
Das Ergebnis von width() ist eine Zahl (keine Zeichenfolge) ohne Einheiten, was für Addition und Subtraktion praktisch ist.

Konsole.log ($('div').css('Breite')); // '100px'
console.log( $('div').width() ); //100 Zahlentyp

2.1.2 Einstellen des Breitenwertes

// konsole.log( $('div').css('width','200px') );
Konsole.log( $('div').width('200px') );

2.2 innerWidth() und outerWidth()

2.2.1 Wertevergleich

div {
    Breite: 100px;
    Höhe: 100px;
    Polsterung: 30px;
    Rand: 20px durchgehend orange;
    Rand: 10px;
    Hintergrund: rot;
}

console.log( $('div').width() ); //100 = Inhalt
console.log( $('div').innerWidth() ); //160 = Inhalt + Polsterung
console.log( $('div').outerWidth() ); //200 = Inhalt + Polsterung + Rahmen
console.log( $('div').outerWidth(true) ); //220 = Inhalt + Polsterung + Rahmen + Seitenrand 

2.2.2 Einstellwert: Ändert nur die Breite des Inhalts

$('div').innerWidth('100'); //Ändern Sie den Gesamtwert von Inhalt+Polsterung auf 100px, die Polsterung bleibt unverändert und die Inhaltsbreite beträgt 40px
$('div').innerWidth('50'); //Padding bleibt unverändert, Inhalt wird 0
$('div').outerWidth('150');//Inhalt+Polsterung+Rand=Inhalt+30*2+20*2=150, Inhalt=50
$('div').outerWidth('50');//Inhalt+30*2+20*2=50, Inhalt=0, Polsterung, Rand, Rahmen bleiben unverändert

Das Diagramm des Boxmodells sieht wie folgt aus: Wenn die eingestellte Breite kleiner als die vorherige Einstellung ist, bleiben Polsterung, Rahmen und Rand unverändert, nur der Inhalt wird verkleinert, bis er 0 erreicht.

Die Breite wird größer als das Original eingestellt und nur der Inhalt wird verbreitert

$('div').innerWidth('300'); 

3.offset() und position()

3.1 Wertevergleich

offset() nimmt die Position des Elements relativ zum Dokument an; position() nimmt die Position relativ zum nächstgelegenen positionierten übergeordneten Element an.

3.1.1 Übergeordnetes Element legt keine Position fest

.wrapper {
    Breite: 300px;
    Höhe: 300px;
    Rand: 100px;
    Hintergrund: #ccc;
}
.Inhalt {
    Position: absolut;
    links: 150px;
    oben: 150px;
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: rot;
}

<div Klasse="Wrapper">
    <div Klasse="Inhalt"></div>
</div>
<script src="./jQuery/jquery-3.6.0.js"></script>
<Skript>
    Konsole.log($('.content').offset());
    konsole.log($('.content').position());
</Skript>

Auswirkung: Da der Wrapper keine Positionierung hat, ist die dem Inhalt am nächsten gelegene Position der Textkörper und der Positions-Wert ist relativ zum Textkörper.
Das vom Offset zurückgegebene Objekt ist ursprünglich relativ zum Dokument positioniert (der Standardrand von body: 8px ist aufgrund des Zusammenbruchs verschwunden).

3.1.2 Eltern-Einstellposition

Wenn der Wrapper die Position festlegt:

.wrapper {
    Position: relativ;
    oben: 100px;
    links: 100px;
    Breite: 300px;
    Höhe: 300px;
    Hintergrund: #ccc;
}
.Inhalt {
    Position: absolut;
    links: 100px;
    oben: 100px;
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: rot;
}

Wirkung:

3.2 Vergleich der Einstellwerte

position() kann nicht manuell eingestellt werden; offset() kann manuell eingestellt werden

$('.inhalt').offset({
    links: 50,
    oben: 50
});

Wirkung: Relative Dokumentpositionierung

4. scrollLeft() und scrollTop()

scrollLeft(): Ruft den Wert der horizontalen Bildlaufleiste von der linken Seite ab
scrollTop(): Ruft den Wert über der vertikalen Bildlaufleistendistanz ab

4.1 Wert

.wrapper {
    Breite: 400px;
    overflow: auto;/*Der Schlüssel zu den horizontalen und vertikalen Bildlaufleisten*/
}
.Inhalt {
    Anzeige: Inline-Block;
    Breite: 100 %;
    Höhe: 100%;
}

$('.inhalt').offset({
    links: 50,
    oben: 50
});

Wirkung:

Um den Wert des übergeordneten Elements (.wrapper) abzurufen, können Sie, wenn das übergeordnete Element body ist, den Wert direkt im Dokument abrufen: $(document).scrollLeft()

4.2 Werte einstellen

Der vertikale Scrollbalken scrollt nach oben. Die Scrolldistanz ist die Distanz, die der Textinhalt nach oben saust und die Distanz, die der Scrollbalken nach unten gezogen wird.

4.3 Kleine Demo

Funktion: Beim Lesen eines Artikels wird die Bildlaufleiste automatisch in regelmäßigen Abständen nach oben verschoben, um den folgenden Inhalt anzuzeigen. So ist kein manuelles Scrollen mehr nötig.

.Inhalt {
    Breite: 400px;
}

Der Textinhalt wird von einem Div mit einem Inhaltsklassennamen umschlossen:

Funktionaler Implementierungscode:

var Zeitgeber;
var neuesTop;
Timer = Intervall festlegen(Funktion () {
    neuesTop = $(document).scrollTop();
    wenn (newTop + $(window).height() >= $('body').height()) {
        Intervall löschen(Timer);
    } anders {
        Konsole.log('Timer');
        $(document).scrollTop(newTop + 20);
    }

}, 100)

Die Höhe des Bodys wird durch den Inhalt erweitert, daher kann $('body').height() $('.content').height()
Wenn die Bildlaufdistanz der Bildlaufleiste + Höhe des Anzeigefensters >= tatsächliche Texthöhe ist, bedeutet dies, dass die Bildlaufleiste nach unten gezogen wurde und der Timer gelöscht werden kann.

Wirkung: Ziehen Sie weiter nach unten und der Timer wird gelöscht, wenn Sie den Boden erreichen.

Sie werden sehen, dass am Ende tatsächlich ein kleines Stück übrig bleibt, das nicht bis zum Boden reicht:

Dies liegt daran, dass der Textkörper standardmäßig einen Rand von 8 Pixeln hat. Entfernen Sie ihn einfach

Darüber hinaus: Versuchen Sie, ein Div zu zeichnen, um diesen automatischen Bildlaufeffekt zu platzieren und das Verständnis der Beurteilungsbedingungen zu festigen:

Körper {
    Rand: 0;
}
.wrapper {
    Höhe: 400px;
    Breite: 400px;
    Überlauf: automatisch;
}

.Inhalt {
    
    Anzeige: Inline-Block;
    Breite: 100 %;
}

Der Textinhalt wird in einen Wrapper eingebunden

var Zeitgeber;
var neuesTop;
Timer = Intervall festlegen(Funktion () {
    neuesTop = $('.wrapper').scrollTop();
    wenn (Math.round(newTop + $('.wrapper').height()) >= Math.round($('.content').height())) {
        Intervall löschen(Timer);
        console.log('löschen');
    } anders {
        Konsole.log('Timer');
        $('.wrapper').scrollTop(newTop + 20);
    }

}, 100) 

Damit ist diese Artikelserie über die CSS-Stilattribute css() und width() in jQuery abgeschlossen. Weitere Informationen zu den CSS-Stilattributen von jQuery finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!