jqueryはインラインスタイルcss()を設定します-jsチュートリアル-php.cn

jqueryはインラインスタイルcss()を設定します

无忌哥哥

リリース： 2018-06-29 14:02:25

オリジナル

4784 人が閲覧しました

jquery はインラインスタイル css() を設定します

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

ログイン後にコピー

css() メソッドは attr() メソッドに非常に似ており、読み取りと設定の機能も付いています

実行される操作は 1 つのパラメーターの数に基づいて決定されます。最初のパラメータは

関数を設定するもので、これは現在の要素の style 属性 (実際にはインラインスタイル

1) の値を読み取るか設定するのと同等です。スタイル css (名前、値) を設定します

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. スタイル css (名前) を読み取り、返されるのはすべて文字列型です

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

ログイン後にコピー

文字列が返されるため、幅や高さなどのデータを計算する場合は、最初に数値型に変換します

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

ログイン後にコピー

このような操作は非常に面倒であることがわかりますが、幅と高さの計算は非常に頻繁に使用されます

そのため、jquery には幅と高さのスタイル用に 2 つの専用メソッドが用意されています: width() と height()

3. width() メソッドと height() メソッド

画像の幅と高さを 200 に設定します。単位はデフォルトで 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;)

ログイン後にコピー

は次と同等です:

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

ログイン後にコピー

幅と高さの設定はさらに簡単で、演算子の略語

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

ログイン後にコピー

は次と同等です:

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

ログイン後にコピー

height() height メソッド、使用方法は width() とまったく同じです一貫性があります。ご自身でテストしてください

width と height に加えて、現在の値を取得します要素の位置も頻繁に使用される操作です

4. 要素の位置を取得します: offset()。これはオブジェクト

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

ログイン後にコピー

からのオフセットをクエリします

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

ログイン後にコピー

この操作は通常のドキュメントフロー内の要素の位置を反映していることがわかります

要素が絶対配置を採用している場合、それを親ブロックで表示する方法オフセットはどうなるでしょうか

5. element:position()

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

ログイン後にコピー

offset() メソッドとposition() メソッドは、ページ内の視覚要素にのみ適用され、取得のみが可能であり、設定はできません

同様に、scrollLeft() は水平スクロールバーの位置を返し、 scrollTop() は垂直スクロールバーの位置を返します。自分でテストできます

結果をコンソールで確認してください

以上がjqueryはインラインスタイルcss()を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。