ホームページ > 記事 > ウェブフロントエンド > jqueryはインラインスタイルcss()を設定します

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

无忌哥哥オリジナル: 2018-06-29 14:02:254771ブラウズ

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 サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vue-cli プロジェクトでモックデータを使用する方法次の記事：vue-cli プロジェクトでモックデータを使用する方法

続きを見る