jQueryでCSSのプロパティの値を操作する方法は基礎的なことで簡単なのですが
すでに各要素に指定(設定)されているCSSプロパティ値を取得する方法が
必要な際に使い方を忘れがちなのでメモ書き。

例えば<div id=”box”>とID名が付けられた
ボックス要素の幅「width」を取得する場合。

jQueryでCSSプロパティの値を取得

$(function(){
	$('#box').css('width');
});

単純な記述ですが、「.css」の後ろに属性を記載するのみです。

このままでの記述では何も意味を持たないので
この<div id=”box”>にCSSで幅「width」と高さ「height」を指定して
変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、
アラートで値を表示する場合。

◆HTML
<div id="box"></div><!--/#box-->
◆CSS
#box {
	width: 300px;
	height: 100px;
}
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var boxWidth = $('#box').css('width');
	var boxHeight = $('#box').css('height');
	alert(boxWidth);
	alert(boxHeight);
});
</script>

動作サンプルはこちら

この様な使い方をすることで、
jQueryで各要素のCSSプロパティ値を取得することができ、
いろいろ利用することで何かと便利に使えたりします。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでCSSプロパティの値を取得する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR