cssコンテンツとHTMLおよびJavaScriptのリンク

HTML、CSS、JavaScriptは互いに分離され、それぞれの役割を果たします。
これは、フロントエンド開発の初心者が知っている基本原則です。

特に、CSSとJavaScriptはどちらもHTMLを中心に展開していますが、両者の接触はほとんどありません
。CSSとHTMLの関係は、CSSがHTMLを変更し、ほとんどすべてのCSSが一方的にHTMLを指示することです。
全体として、CSSは「独立」しています。。 "子"

ただし、すべてに例外があります。非常にまれなケース
ですが、疑似クラスのcontent属性など、CSSをHTMLで制御する必要があります。

多くの初心者は、疑似クラスのコンテンツを文字列に設定できることだけを知っていますが、動的なデータ
コンテンツを取得するために、attr（）式にも設定できることを知りません。スプライスすることもできます。テキストコンテンツ、および複数のattr（）を一緒に使用します。

css content：attr（属性名）; HTMLの属性名に
対応
= "コンテンツによって取得された値"
詳細についてはデモを参照してください

デモ

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>css content 与 HTML, JavaScript 的联动</title>
	<style>
		.div::before {
     
     
			outline: 1px green solid;
			content: attr(data-before);
		}

		.div::after {
     
     
			outline: 1px green solid;
			content: attr(data-after);
		}

		#div3::after {
     
     
			content: "还可以拼接文本内容, 多 attr() 连用 "attr(data-after)" , "attr(data-before);
		}
	</style>
</head>

<body>

	<div class="div" id="div0" data-before="初始 before" data-after="初始 after"> div </div>
	<div class="div" id="div1" data-before="初始 before" data-after="初始 after"> div </div>
	<div class="div" id="div2" data-before="初始 before" data-after="初始 after"> div </div>
	<div class="div" id="div3" data-before="初始 before" data-after="初始 after"> div </div>

	<script type="text/javascript">
		"use strict"

		window.onload = function () {
     
     
			document.getElementById("div1").setAttribute("data-after", "setAttribute 修改了 after")
			document.getElementById("div2").dataset.before = "dataset 修改了 before"

		}
	</script>
</body>

</html>

CSS値がHTML要素の属性値にリンクされると、JavaScriptを使用して値を簡単に取得および変更できます。

終わり

cssコンテンツとHTMLおよびJavaScriptのリンク

おすすめ