|Liberty自由に生きる。【Javascript】CSSを動的に書き換えるJavaScript|jQuery|プログラミングこんにちは、yutaです。・ボタンを押した時にボタンの色が変わる・ある位置までスクロールしたらコンテンツの続きを表示する・イルミネーションのように数秒ごとに背景色が切り替わるなどのエフェクトをつけたいと思ったことはありませんか?それらは、cssを動的に書き換えることで実現できます。いうわけで今回はcssを動的に書き換える方法を2パターン紹介します。※別タブで開きますので記事の邪魔にはなりません。1.jQueryのcss()を使う比較的簡単な方法として、jQueryで提供されているcss()を利用する方法があります。$('#neko').css('color','red');</script>で変更できます。‘値’);・セレクタ:idとかclass。・プロパティ:colorとか、widthとか。・値:プロパティに対する値。処理の内容});とすれば、「ねこ」という文字をクリックした時に文字色が赤くなるエフェクトになります。このやり方では「指定した要素のstyle属性を書き換えている」ということを認識しておかなければいけません。30px;”>ねこ</p>つまり、もともとcssファイルを読み込んでその中でスタイルを指定している場合、style属性の記述と競合が起き意図した通りのスタイルになってくれないことがあります。以下のような場合はHTML内のスタイル属性とCSS内の記述が競合しています。20px;}というわけで、WEBページのスタイルを全てstyle属性で書くのであれば問題は無いでしょうが、流石にそれはナンセンスです。個人的には、デザインとコンテンツを分けるためにstyle属性は極力使いません。そこで、style属性では無く、別で読み込んだCSSのプロパティを書き換える方法を次に説明します。2.javascriptでstyleSheetsオブジェクトを読み込んでいじるstyleSheetsオブジェクトでCSSを読み込んでプロパティを書き換えることで、style属性との競合を考える必要が無くなりますし、HTMLファイルにstyleを記述するということを避けられます。今回は、既にCSS側で記述しているセレクタ(id,class)に対してプロパティを追加、書き換え、削除する方法だけ紹介しますが、セレクタ自体を追加したり削除することも可能です。こちらのページが参考になります。CSSを変数sに読み込みます。document.styleSheets.item(index);indexは、HTMLで読み込まれたCSSの順番です。3は、<style></style>となります。<style>タグの部分もスタイルシート(インラインスタイルシート)として扱われます。逆に、style属性はスタイルシートとして扱われません。次にプロパティのいじり方です。プロパティの追加、変更s.cssRules.item(index).style.setProperty(‘プロパティ’,’値’);プロパティの削除s.cssRules.item(index).style.removeProperty(‘プロパティ’);sは、styleSheetsオブジェクトが格納された変数でしたね。プロパティの追加、変更と削除はオレンジ色部分が違うだけです。});</script>~略~最初は「ねこ」のフォントサイズ20pxですが、「ねこ」をクリックするとCSSが書き換えられてフォントサイズが30pxになります。実際にCSSファイル自体が書き換えられて上書きされるわけで無く、WEBページを表示している時だけの効果なのでそこは安心してください。いうわけで以上となります。【Javascript】HTMLの要素を動的に追加・削除する。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。