Heim >Web-Frontend >js-Tutorial >jquery legt den Inline-Stil css() fest

jquery legt den Inline-Stil css() fest

无忌哥哥Original: 2018-06-29 14:02:254818Durchsuche

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

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;
})

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;)

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;)

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;)

entspricht:

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

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

entspricht:

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

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()

Abfragen Sie den Versatz von links und oben

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

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

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)

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!

jquery css 运算符字符串字符串类型对象 position

Stellungnahme：

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

Vorheriger Artikel：So verwenden Sie Scheindaten im Vue-Cli-ProjektNächster Artikel：So verwenden Sie Scheindaten im Vue-Cli-Projekt

In Verbindung stehende Artikel

Mehr sehen