こんにちは、yutaです。
突然ですが、
webページ上で・・・
・ボタンを押した時にボタンの色が変わる
・ある位置までスクロールしたらコンテンツの続きを表示する
・イルミネーションのように数秒ごとに背景色が切り替わる
などのエフェクトをつけたいと思ったことはありませんか？
それらは、cssを動的に書き換えることで実現できます。というわけで今回はcssを動的に書き換える方法を2パターン紹介します。
Method 1.jQueryのcss()を使う
Method 2.javascriptでstyleSheetsオブジェクトを読み込んでいじる
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
Method 1.jQueryのcss()を使う
比較的簡単な方法として、jQueryで提供されているcss()を利用する方法があります。
<p id="neko">ねこ</p>という要素の文字色を変更したい場合、
<script>
$('#neko').css('color','red');
</script>で変更できます。
$(‘セレクタ’).css(‘プロパティ’, ‘値’);
・セレクタ：idとかclass。idの時は#id名、classの時は.class名で指定
・プロパティ：colorとか、widthとか。
・値：プロパティに対する値。
これをクリック時に行いたければ、
$('#neko').on('click',function(){
処理の内容
});とすれば、「ねこ」という文字をクリックした時に文字色が赤くなるエフェクトになります。
しかし、このやり方では「指定した要素のstyle属性を書き換えている」ということを認識しておかなければいけません。
style属性：要素のタグ内で指定されたスタイルルール
※以下のオレンジ色の部分がstyle属性
(ex) <p id=”neko” style=”font-size: 30px;”>ねこ</p>
つまり、もともとcssファイルを読み込んでその中でスタイルを指定している場合、style属性の記述と競合が起き意図した通りのスタイルになってくれないことがあります。
以下のような場合はHTML内のスタイル属性とCSS内の記述が競合しています。
[index.html]
~略~
<link rel=”stylesheet” href=”./style.css”>
~略~
<p id=”neko” style=”font-size:30px;”>ねこ</p>
~略~
[style.css]
#neko{
font-size: 20px;
}
というわけで、WEBページのスタイルを全てstyle属性で書くのであれば問題は無いでしょうが、流石にそれはナンセンスです。
個人的には、デザインとコンテンツを分けるためにstyle属性は極力使いません。
そこで、style属性では無く、別で読み込んだCSSのプロパティを書き換える方法を次に説明します。
Method 2.javascriptでstyleSheetsオブジェクトを読み込んでいじる
styleSheetsオブジェクトでCSSを読み込んでプロパティを書き換えることで、style属性との競合を考える必要が無くなりますし、HTMLファイルにstyleを記述するということを避けられます。
今回は、既にCSS側で記述しているセレクタ(id,class)に対してプロパティを追加、書き換え、削除する方法だけ紹介しますが、セレクタ自体を追加したり削除することも可能です。こちらのページが参考になります。
まず、CSSを変数sに読み込みます。
var s = document.styleSheets.item(index);indexは、HTMLで読み込まれたCSSの順番です。例えば、以下のようにHTMLで4つのCSSを読み込んでいる場合、
[HTML]
~略~
<link rel=”stylesheet” href=”./styleA.css”>
<link rel=”stylesheet” href=”./styleB.css”>
<link rel=”stylesheet” href=”./styleC.css”>
<style>
~内容~
</style>
~略~
index: 0は、styleA.css
index: 1は、styleB.css
index: 2は、styleC.css
index: 3は、<style></style>
となります。
<style>タグの部分もスタイルシート(インラインスタイルシート)として扱われます。逆に、style属性はスタイルシートとして扱われません。
次にプロパティのいじり方です。
プロパティの追加、変更
s.cssRules.item(index).style.setProperty(‘プロパティ’,’値’);
プロパティの削除
s.cssRules.item(index).style.removeProperty(‘プロパティ’);
sは、styleSheetsオブジェクトが格納された変数でしたね。プロパティの追加、変更と削除はオレンジ色部分が違うだけです。
例を出しましょう。
[CSS]
#neko{
font-size: 20px;
}[HTML]
~略~
<link rel="stylesheet" href="./style.css">
~略~
<p id="neko">ねこ</p>
<script>
var s = document.styleSheets.index(0); /*最初に読み込んだCSSオブジェクトを取得*/
$('#neko').on('click',function(){
s.cssRules.item(0).style.setProperty('font-size','30px');
});
</script>
~略~最初は「ねこ」のフォントサイズ20pxですが、「ねこ」をクリックするとCSSが書き換えられてフォントサイズが30pxになります。
実際にCSSファイル自体が書き換えられて上書きされるわけで無く、WEBページを表示している時だけの効果なのでそこは安心してください。
というわけで以上となります。では、また！
