JSではCSSスタイルクラス定義+JSでHTML Elementに渡す

3240 ワード
html JavaScript CSS web テキストリンク

  • JSで使用されるobejct.className=cssClassを表示する場合、classNameはgetterでありsetterである.

  • 次の方法では、JSとCSSは直接対話しません.逆に、JSはHTMLを変更し、CSSはHTMLを表示して、HTMLを媒介とするJS-(HTML)->CSSの操作を実行します.

    • in HTML

    <body>
	<div class="hello">
        <h1 id="title1">It's me!</h1>
        <h1 id="title2">It's me!</h1>
    </div>
</body>

    in CSS

    .active{ /* CSS클래스 active 정의*/
	color : tomato;
}

    in Javascript

    const h1 = document.querySelector(".hello:first-chile h1");

h1.className = "active"; // h1 오브젝트에 CSS클래스 active내에서 할당한 스타일명세 데이터를 전달했음
    21.11.02 - TIL [nuxt.js]
    Position