デモページはこちら

jQueryのcssメソッドで要素のCSSを取得・変更します。以下のhtmlの構造でテストします。

<ul>
	<li>HTML・CSS</li>
	<li>Sass</li>
</ul>
<p class="title">最初の要素のCSSを変更</p>
<input type="button" class="btn01" value="1箇所変更">
<input type="button" class="btn02" value="2箇所変更"><br><br>
<p class="title">2番目の要素のCSSを取得して変更</p>
<input type="button" class="btn03" value="1箇所取得して1箇所変更">
<input type="button" class="btn04" value="2箇所取得して2箇所変更"><br><br>
<input type="button" class="btn05" value="リロードしてリセット">

まずCSSの変更です。対象の要素に設定されたCSS、または要素の持つ初期値のCSSをcssメソッドで変更します。
1箇所変更する場合は第一引数にプロパティ、第二引数に値を指定します。2箇所以上、複数変更する場合は{'プロパティ': '値', 'プロパティ': '値'}のように記述します。どちらも、プロパティと値の指定にはシングルクォーテーションが必要です。

$(function() {
	$('.btn01').on('click', function() {
		$('ul').children('li:first').css('font-weight', 'bold');
	});
	$('.btn02').on('click', function() {
		$('ul').children('li:first').css({'font-weight': 'bold', 'color': 'red'});
	});
});

次にCSSの取得です。対象の要素に設定されたCSSをcssメソッド取得し、if文で取得したCSSのプロパティの値と指定した値が一致した時に処理を実行します。
1箇所取得する場合は第一引数にプロパティを指定します。変数に格納した場合、変数にはプロパティに設定された値が入ります。2箇所以上、複数取得する場合は['プロパティ', 'プロパティ']のように記述します。複数取得して変数に格納した場合、変数名['プロパティ']のように記述すると、1つずつそのプロパティに設定された値が取り出せます。プロパティ名にハイフンが含まれない場合、変数名.プロパティのように記述しても値が取り出せます。
なお、cssメソッドでCSSを複数取得する記述法は、jQueryバージョン1.9以降で可能です。

$(function() {
	$('.btn03').on('click', function() {
		var result01 = $('ul').children('li:nth-child(2)');
		var state01 = $(result01).css('font-weight');
		if(state01 == '400') {
			$(result01).css('font-weight', 'bold');
		}

	});
	$('.btn04').on('click', function() {
		var result02 = $('ul').children('li:nth-child(2)');
		var state02 = $(result02).css(['font-weight', 'color']);
		if(state02['font-weight'] == '400' && state02.color == 'rgb(0, 0, 0)') {
			$(result02).css({'font-weight': 'bold', 'color': 'red'});
		}
	});
	$('.btn05').on('click', function() {
		location.reload();
	});
});