jQueryでCSSの値をコントロールする - jQueryのチュートリアル

このレッスンでは jQuery で 既存の CSS の値を取得　変更する方法 及び　新たにスタイルを追加する 方法について解説していきます まずは ダウンロードしてきた こちらの control-css というフォルダーの中に入っている こちらの index.html ファイルと こちらの js フォルダーの中に入っている javascript.js ファイルを エディッターで開いてください そして　これがそれらのファイルを 開いた状態です そして　こちらの右側にはこちらの index.html をブラウザで 開いたものを表示させています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず こちらの HTML ファイルをみてみます こちらの HTML ファイルには このように h1 タグがありますね 今回はこちらの h1 タグの スタイルシートに jQuery から アクセスする方法についてみていきます それでは こちらの javascript.js ファイルを 開きます すると このような画面になりましたね まず こちらの部分で 先程の h1 タグに対して クリックイベントを登録しています 先程の h1 タグ部分を クリックすることによって この function の波括弧の 間のこの部分の処理が 実行されるといった感じですね そして この function の 括弧の中ですが 合計三つの処理を書いています 但し 最後の二つに関しては 現在 comment-out をして 実行されないようにしています では 順番に一番上から見ていきます まず こちらの部分では jQuery を使って既存の CSS の値を取得する処理を書いています まずは var と書いて横幅と書いています こうする事によって 変数　横幅が出来上がります そして = と書いてその後に $this そして .csswidth と書いています こちらの $this というのは ここでは この h1 のことを指します そして css と書いて　括弧　括弧閉じる そして その中の引数に width と書いていますね この様に書く事でこの h1 に 設定されている横幅の値をこちらの変数横幅 に代入することができます そして…