css - CSSの「コンテンツ」プロパティはインラインスタイルの値を取得できますか?

Question

次のようなことをしたいと思います。

<div style="background-image: url(http://some_url.com);"></div>

div:after {
    content: attr(style[background-image]);
}

ここでの目標は、html 要素にインラインで適用されるものからコンテンツの値を取得することです。これは可能ですか?もしそうなら、正しい構文は何ですか?

score 3 · Accepted Answer

attr()CSS プロパティではなく、HTML 属性のみを対象としています。取得できたとしてもattr(style)(実際には取得できます)、次の文字列であるその属性のテキスト値のみを取得します。

"background-image: url(http://some_url.com);"

ただし、このテキスト値を使用して意味のあることを行うことはできません ( contentmaybe として出力することを除く)。

疑似要素に要素と同じ背景画像を持たせたい場合は、次を使用します。

div:after {
    background-image: inherit;
}

繰り返しますが、これ自体はあまり意味がありません。background残りのプロパティ値のような他のスタイルを指定し、寸法を指定する必要があります。

背景画像の URL を取得してコンテンツとして印刷したい場合、CSS では実行できません。疑似要素を使用する代わりに、JavaScript を使用して、計算された値を確認し、background-imageその値を解析してコンテンツとして挿入する必要があります。:after

1 に答える 1