JavaScript で CSS クラスを動的に作成して適用する方法 JavaScript で CSS クラスを動的に作成すると、HTML 要素の外観を柔軟に制御できます。次の手順は、これを実現する方法の概要を示しています。 新しい を作成します。要素:</strong></li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var style = document.createElement('style');</pre><div class="contentsignin">ログイン後にコピー</div></div> <ol start="2"><li><strong>タイプと InnerHTML を設定します:</strong></li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>style.type = 'text/css'; style.innerHTML = '.cssClass { color: #f00; }';</pre><div class="contentsignin">ログイン後にコピー</div></div> <ol start="3"><li><strong>スタイルを<head>:</strong></li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>document.getElementsByTagName('head')[0].appendChild(style);</pre><div class="contentsignin">ログイン後にコピー</div></div> <ol start="4"><li><strong>クラスを HTML に適用する要素:</strong></li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>document.getElementById('someElementId').className = 'cssClass';</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>例:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.myClass { color: blue; }'; document.getElementsByTagName('head')[0].appendChild(style); document.getElementById('myElement').className = 'myClass';</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このコードは、青色のテキストを持つ「myClass」という CSS クラスを作成し、それを適用しますID を持つ HTML 要素に"myElement."</p> <p><strong>注:</strong></p> <p>このメソッドは HTML 要素に限定されません。また、asp:Textbox、asp:Dropdownlist、asp:Datalist などの ASP.NET コントロールにも適用できます。</p>
