Heim > Web-Frontend > CSS-Tutorial > Wie erreicht man die Funktionalität „width: calc(100% - 100px)' in älteren Browsern mit jQuery?

Wie erreicht man die Funktionalität „width: calc(100% - 100px)' in älteren Browsern mit jQuery?

Susan Sarandon
Freigeben: 2024-11-17 04:09:03
Original
850 Leute haben es durchsucht

How to Achieve `width: calc(100% - 100px)` Functionality in Older Browsers Using jQuery?

Eine jQuery-Alternative für den CSS-Code: width: calc(100% -100px)

Der CSS-Code width: calc(100% -100px) berechnet die Breite eines Elements durch Subtrahieren von 100 Pixel von der Gesamtbreite des Containers. Dieser Code funktioniert jedoch nur in modernen Browsern wie Chrome und Firefox.

Aus Gründen der Kompatibilität mit älteren Browsern können Sie jQuery verwenden, um die Funktionalität nachzuahmen:

$('#yourEl').css('width', '100%').css('width', '-=100px');
Nach dem Login kopieren

In diesem Code:

  1. $('#yourEl').css('width', '100%'): Legt die Breite des Elements mit der ID yourEl fest auf 100 %.
  2. css('width', '-=100px'): Subtrahiert 100 Pixel von der aktuellen Breite des Elements.

Dieser jQuery-Code erzielt das gleiche Ergebnis wie der CSS-Berechnungsausdruck: Er berechnet dynamisch die Breite eines Elements nach dem Entfernen von 100 Pixeln. Es ist mit älteren Browsern kompatibel, die die Berechnungsfunktion nicht unterstützen.

Das obige ist der detaillierte Inhalt vonWie erreicht man die Funktionalität „width: calc(100% - 100px)' in älteren Browsern mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage