ホームページ > 記事 > ウェブフロントエンド > jqueryでCSSの位置属性を変更する方法

jqueryでCSSの位置属性を変更する方法

WBOYオリジナル: 2022-06-13 17:05:352215ブラウズ

jquery では、css メソッドを使用して要素の位置属性を変更できます。このメソッドは、指定された要素の 1 つ以上のスタイル属性を設定または返すために使用されます。メソッドの最初のパラメータを設定するだけです。 "position" 位置属性に設定する場合、2 番目のパラメーターは変更された位置属性に設定できます。構文は「element object.css("position","changed Positioning Attribute value");」です。

このチュートリアルの動作環境: Windows10 システム、jquery3.4.1 バージョン、Dell G3 コンピューター。

jquery で CSS 位置属性を変更する方法

css() メソッドは、選択した要素の 1 つ以上のスタイル属性を設定または返します。

CSS プロパティの設定

特定の CSS プロパティを設定するには、次の構文を使用してください:

css("propertyname","value");

複数の CSS プロパティを設定するには、次の構文を使用してください:

css({"propertyname":"value","propertyname":"value",...});

position 属性は、要素の配置タイプを指定します。

position 属性の 5 つの値:

static
##relative
fixed
absolute
sticky

要素には、上、下、左、および属性を右側に配置します。ただし、これらのプロパティは、position プロパティが最初に設定されない限り機能しません。また、位置決め方法に応じて動作も異なります。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".pos_fixed").css("position","static");
  });
});
</script>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<button>返回元素的定位属性</button>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

出力結果:

jqueryでCSSの位置属性を変更する方法

ビデオチュートリアルの推奨事項:

jQuery ビデオチュートリアル

以上がjqueryでCSSの位置属性を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css 对象 position

声明：

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

前の記事：jQueryイベントとは何ですか?次の記事：jQueryイベントとは何ですか?

続きを見る