CSSについて。setAttributeを使った細かな設定

Question

.cla> .A.B.C:after {
width:10px;
}

のようなスタイルをSetAttributeで指定することは可能でしょうか？

Comments

[think49]

element.setAttribute の事ですか。大文字/小文字は区別される為、間違えないようご注意下さい。 https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

[seri]

ありがとうございます、間違っていました。

[think49]

element.setAttribute はDOM APIの為、CSSと直接関わりはありません。JavaScript/Java/PHPなど、扱える言語は複数ある為、対象の言語をタグに追加して下さい。

Answer 1

:afterで出現した疑似要素はDOMに現れないため、setAttributeをする以前にJavaScriptからノードとして取得することができません。

ということで、動的に:afterのスタイルを書き換えたければ、<style>タグを書き出す、といった間接的な手法しかありません。

Answer 2

element.setAttribute

element.setAttribute でstyle属性を指定した場合、その要素に対するスタイルを指定出来ます。
疑似要素は別の要素になりますので指定出来ません。
そもそも、セレクタを指定出来ないのですが…。

CSSStyleSheet#insertRule

DOMからCSSを操作するには CSSStyleSheet#insertRule を使用します。
しかし、この関数は「CSS(装飾)とJavaScript(振る舞い)」の役割分担を変えてしまうものなので、お勧めはしません。
http://uhyohyo.net/javascript/5_3.html

classList.add

CSS(装飾)の役割を尊重する手法として、HTML上に存在しないスタイルを宣言しておき、classトークンを付け外しする方法があります。

.cla>.D:after {
  width:10px;
}

document.querySelectorAll('.A.B.C').forEach(function (element) {
  element.classList.add('D');
});

ここで使用するのはclass属性である必要はありません。
例えば、WAI-ARIA属性やdata-*属性など、他にも候補はあります。
それが論理構造を表し、セレクタで指定可能なら何でも良いといえます。

Re: seri さん