jqueryでスタイルシートのセレクタを書き換えることは可能でしょうか？

Question

スタイルシートに以下の記述があります。

@media screen and (min-width: 1000px) {
    #contents, #top .inner, #header, #topmenubox, #topmenu ul, #footer .inner, #footermenu, #pagetop {
        width: 1300px;
        max-width: 1300px;
    }
}

以下のように .col2-header, .big-header .wrapを追加したい。

@media screen and (min-width: 1000px) {
   #contents, #top .inner, #header, #topmenubox, #topmenu ul, #footer .inner, #footermenu, #pagetop, .col2-header, .big-header .wrap {
        width: 1300px;
        max-width: 1300px;
    }
}

jqueryでスタイルシートのセレクタを書き換える、または追加する方法があれば

Answer 1

jQueryを用いずとも次の何れかの方法でstyle要素内のスタイル記述を書き換えることは可能です.

• CSSOMを使う
• style要素のtextContentプロパティを書き換える

単なるテキスト処理となります.

※しかし, 特別な理由（例えば疑似要素：擬似クラスに対するスタイルを書き換えるなど）がない限りスタイル記述をJavaScriptで書き換えるのは避けたほうが良いと思います.

---

CSSOMを使うなら例えばこんな.
※スタイルを追加する部分や条件が予め判っている必要があります.

<style id="styleNode">
@media screen and (min-width: 1000px) {
	#contents, #top .inner, #header, #topmenubox, #topmenu ul, #footer .inner, #footermenu, #pagetop {
		width: 1300px;
		max-width: 1300px;
	}
}
</style>

"use strict";
{
	const sheet = styleNode.sheet;
	//CSSもツリー構造をとる
	const mediaRule = sheet.cssRules[0];
	const oldRule = mediaRule.cssRules[0];
	mediaRule.deleteRule(oldRule);
	mediaRule.insertRule(`${oldRule.selectorText},.col2-header, .big-header .wrap{${oldRule.style.cssText}}`);
	console.log(mediaRule.cssText);
}

Comments

[defghi1977]

具体的なやり方が提示されないからと言って、別の質問を立ち上げるのは如何なものでしょうか？

[snof]

セレクタを書き換えることと、別のセレクタにスタイルを取得し追加することは、違うことなのかと思い質問させていただきました。

[snof]

回答頂きありがとうございます。"use strict";について調べてみたいと思います。

[defghi1977]

了解しました.
なお、今後はもう少し質問の背景を詳しくお書き願います.
今回の質問であれば、「前者のスタイルシートが何らかのシステムから自動出力されるものであり、そのスタイルの内容に合わせて自前のスタイルシートを定義したい」旨が記述されていれば, 質問する側も回答する側もこのような遠回りをせずに済んだことでしょう.

[snof]

以後気をつけたいと思います。お手数をおかけし申し訳ありません。

[defghi1977]

とは言え、その背景が判ると非常にありそうなケースですから個人的には良い質問だと思います.

Answer 2

元CSSがhtmlにダイレクトに埋め込まれているので
複数ページを変更するのが大変だということでしたら
外部ファイルに分離し、外部ファイルの方の該当箇所を修正するのが
効率的でしょう
なにもわざわざjQueryで処理する意味はありませんので。

jQueryでやるなら普通にタグのスタイルを書き換える方式で十分です