検索

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

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

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

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 プロジェクトでモックデータを使用する方法

関連記事

続きを見る