トップへ戻る
BLOGS

JavaScript によるCSS操作

JavaScript によるCSS操作

今回はJavaScriptを使用した直接的なCSS操作、取得、変更、削除の方法を見ていきたいと思います

早速いきましょうまずはCSSを追加する方法です

style属性の変更

Elementオブジェクト.style.CSSプロパティ名 =  設定したい値;

Elementオブジェクト: スタイルの変更したい要素
CSSプロパティ名:CSSのプロパティ名を指定しますJavaScriptではハイフンを挟む場合はキャメルケースを使用します

こちらのstyleメソッドはCSSを直接HTMLに書き込んで編集します

JavaScriptではスネークケース「ー」(ハイフン)を認識できないためこれらのプロバティを使用する際はロワーケース、fontSizeのように最初は小文字で繋がる部分は大文字にする必要があります

タグに直接記述するタイプでCSSを指定するためかなり優先度(継承度)が高くなるため注意が必要ですが、直接書かれたものを削除したい場合はこちらのメソッドに空文字列を入れてあげれば、NULLで上書きできます

またcssTextメソッドで一括のプロパティを指定することが出来ます

styleを一括で指定する場合 cssText

Elementオブジェクト.style.cssText = 'width: 500px; font-size: 30px; line-height: 1.4;';

このように書くことも出来ます

プロパティの値を取得したい場合

console.log(Elementオブジェクト.style.プロパティ名);
> 値

プロパティ名でその値が取得できます、主に要素の幅を取得したり、色を取得したりなどが有用でしょうか。。。

スタイルシートの最終的な値を取得する

 window.getComputedStyle.(要素.プロパティ名);

こちらは書き替えるではなくあくまで参照するだけのメソッドですが条件分岐などに使用できるため有用ですね

最終的に結果としてのCSS値となるため動的な条件分岐として使用できます

またコチラのいいところは疑似要素の取得も可能です

const graphAfter = window.getComputedStyle(barGraph[i],'::after');

もちろんここから各プロパティ名でアクセスすることが可能です

const graphWidth = graphAfter.maxWidth;

HTMLにスタイルタグを直接挿入する

const addStyle = (Selector,styleString) => {
  document.styleSheets[0].addRule(Selector, styleString);
}
let styleString = 'content:" ";';
addStyle('.bar::after', styleString);

こちらの関数は本サイトでは正常に動いているのですが試験サイトでは同じような動きをするinsertRuledeleteRuleなどもうまく機能しなかったので一旦保留にしておきます

簡単な解説をしておくと

document.styleSheets[0]で自身のスタイルシートを取得して、

.addRule(セレクターの指定, プロパティの指定)で追加することができる仕組みです

//CSSノード追加
const newStyle = document.createElement('style');newStyle.sheet = "text/css";
document.getElementsByTagName('head').item(0).appendChild(newStyle);
css = document.styleSheets.item(0)
//追加
let idx = document.styleSheets[0].cssRules.length;
css.insertRule("ul.pc_only { outline: solid 1px red; }", idx);//末尾に追加

他のパターンです。

こちらはinsertRule使用しました

これら2つはうまく行った例でしたがテストサイトの結果が説明がつかないです

残念ながら今の私のググり力ではうまく説明も理由もわからなかったので、

いつか必ず理解してここに書き記したいと思います

またはコメント機能もあるためこちらからヒントなどいただけると幸いです

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA