jquery legt den Inline-Stil css() fest-js-Tutorial-php.cn

jquery legt den Inline-Stil css() fest

无忌哥哥

Freigeben： 2018-06-29 14:02:25

Original

4737 Leute haben es durchsucht

jquery legt den Inline-Stil css() fest

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置内联样式css()</title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/jsy.jpg">
<div>
<div></div>
</div>
</body>
</html>

Nach dem Login kopieren

Die Methode css() ist der Methode attr() sehr ähnlich und verfügt außerdem über Lese- und Setfunktionen.

Bestimmen Sie die Ausführung basierend auf der Anzahl der Parameter Die Operation besteht darin, einen Parameter zu lesen und die beiden Parameter festzulegen. Die Funktion von

entspricht dem Lesen oder Festlegen des Werts des Stilattributs des aktuellen Elements, das tatsächlich der ist Inline-Stil

1. Legen Sie den Stil css(name,value) fest

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)
var res = $(&#39;img&#39;).css(&#39;border-radius&#39;, &#39;10%&#39;)
var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;, &#39;3px 3px 3px #888&#39;)
var res = $(&#39;img&#39;).css({
&#39;width&#39;: &#39;200&#39;,
&#39;border-radius&#39;: &#39;10%&#39;,
&#39;box-shadow&#39;: &#39;3px 3px 3px #888&#39;
})

Nach dem Login kopieren

2. Lesen Sie den Stil css(name) und geben Sie alle String-Typen zurück

var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;)
var res = $(&#39;img&#39;).css(&#39;width&#39;)

Nach dem Login kopieren

Weil er zurückkehrt Eine Zeichenfolge für Daten wie Breite und Höhe. Wenn Sie berechnen möchten, müssen Sie sie zunächst in einen numerischen Wert umwandeln

var res = parseInt($(&#39;img&#39;).css(&#39;width&#39;), 10) //200
res += 50
var res = $(&#39;img&#39;).css(&#39;width&#39;,res+&#39;px&#39;)

Nach dem Login kopieren

Es ist ersichtlich, dass ein solcher Vorgang sehr mühsam ist, aber Breiten- und Höhenberechnungen werden sehr häufig verwendet

daher zielt jquery auf die Breiten- und Höhenstile ab. Es gibt zwei spezielle Methoden: width() und height()

3 Die width()- und height()-Methoden

Stellen Sie die Bildbreite und -höhe auf 200 ein. Die Standardeinheit ist px.

var res = $(&#39;img&#39;).width(200)
var res = $(&#39;img&#39;).width(&#39;200&#39;)
var res = $(&#39;img&#39;).width(&#39;200px&#39;)
var res = $(&#39;img&#39;).width(&#39;200pt&#39;)

Nach dem Login kopieren

entspricht:

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)

Nach dem Login kopieren

Es ist einfacher, die Breite und Höhe festzulegen Abkürzung des Operators

var res = $(&#39;img&#39;).width(&#39;+=100&#39;)
var res = $(&#39;img&#39;).width()  //300

Nach dem Login kopieren

entspricht:

var res = $(&#39;img&#39;).css(&#39;width&#39;,&#39;+=50&#39;)
var res = $(&#39;img&#39;).width()  //250

Nach dem Login kopieren

height() height Die Methode und Verwendung sind genau die gleichen wie width() Bitte testen Sie es selbst

In Neben der Breite und Höhe ist das Abrufen der aktuellen Position des Elements auch eine häufig verwendete Operation. jquery definiert auch eine Verknüpfungsmethode

4, die ein Objekt zurückgibt

var res = $(&#39;img&#39;).offset()

Nach dem Login kopieren

Abfragen Sie den Versatz von links und oben

var res = $(&#39;img&#39;).offset().left
var res = $(&#39;img&#39;).offset().top

Nach dem Login kopieren

Sie können sehen, dass dieser Vorgang die Position des normalen Dokumentflusses widerspiegelt

Wenn das Element annimmt absolute Positionierung, wie überprüfe ich den Offset im übergeordneten Block?

5. Überprüfen Sie den Offset des absolut positionierten Elements: position()

var res = $(&#39;.box2&#39;).position().left
var res = $(&#39;.box2&#39;).position().top

Nach dem Login kopieren

offset() und position() sind nur verfügbar gilt für visuelle Elemente auf der Seite und kann nur abgerufen, nicht festgelegt werden

Ähnlich gibt scrollLeft() die horizontale Position der Bildlaufleiste zurück, scrollTop() gibt die Position der vertikalen Bildlaufleiste zurück, jeder kann es selbst testen

Ergebnisse auf der Konsole ansehen

console.log(res)

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjquery legt den Inline-Stil css() fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!