JavaScriptを使用して、既存のCSSスタイルの影響を受けるクリックイベントに基づいて要素を作成するHTMLページの動的コンテンツを作成しようとしています。CSS IDをJavascriptの作成要素に割り当てる
しかし、新しい要素をCSS IDにフックすることはできません。コンテンツのすべての残りの部分が消えた後、それが動作
crestDiv.onclick = function()
{
//Remove the Elements on Screen
var element = document.getElementById("crestDiv");
element.parentNode.removeChild(element);
element = document.getElementById("breakDiv");
element.parentNode.removeChild(element);
element = document.getElementById("buildDiv");
element.parentNode.removeChild(element);
element = document.getElementById("surgeDiv");
element.parentNode.removeChild(element);
element = document.getElementById("wavesIcon");
element.parentNode.removeChild(element);
//Add the Elements to Screen
//Create Heading
var heading = document.createElement("h1");
heading.id = "crestTitle";
var node = document.createTextNode("Crest Heading");
heading.appendChild(node);
//Attach Heading to existing Element
element = document.getElementById("contentDiv");
element.appendChild(heading);
}
は、見出しが画面に表示されますが、それはそれで何のCSSスタイルを持っていません。
私は、新しい見出しに適用するには "crestTitle"のCSS IDを使用しようとしていますが、CSSシートに#crestTitleの下に置いたスタイルに関係なく、新しい見出しには影響しません。
私は間違いがありますか?
あなたはCSSクラスを使用する必要があります。 '.crestTitle'と' heading.classList.add( "crestTitle"); ' – Satpal
CSSとは何ですか?同じIDを持つ複数のアイテムを持つことになりますか?私たちはそれを実行できるように基本的なHTML? – epascarello
あなたのHTMLコードを質問に追加してください。 – anu