Назначение CSS-идентификатора для созданного Javascript элемента

Итак, я пытаюсь создать динамический контент для HTML-страницы, используя JavaScript для создания элементов, основанных на событиях щелчка, на которые повлияет ранее существовавшая стилизация CSS.Назначение CSS-идентификатора для созданного Javascript элемента

Но я не могу подключить новый элемент к его идентификатору CSS.

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 стиля на нем.

Вы можете увидеть, что я пытаюсь использовать CSS-идентификатор «crestTitle» для применения к новому заголовку, но независимо от того, какой стиль я помещал под #crestTitle в моем листе CSS, он не влияет на новый заголовок ,

Я делаю очевидные ошибки?

источник

2016-12-06 Jayson

Вы должны использовать класс CSS. то есть '.crestTitle' и' heading.classList.add ("crestTitle"); ' – Satpal

Что такое CSS? У вас есть более одного элемента с одним и тем же идентификатором? Основной HTML, чтобы мы могли запустить его? – epascarello

Добавьте ваш html-код в вопрос – anu

Можете ли вы предоставить jsfiddle, включая ваши HTML и CSS? Это работает для меня: https://jsfiddle.net/nw35g21x/

CSS:

#crestDiv{ 
    width:100%; 
    min-height:100px; 
    background-color:cyan; 
} 

#crestTitle{ 
    color:red; 
}

HTML:

<body> 
<div id="contentDiv"> 
<div id="crestDiv"> 

</div> 
</div> 
</body>

JavaScript:

var crestDiv = document.getElementById("crestDiv"); 
crestDiv.onclick = function() 
{ 
    //Remove the Elements on Screen 
    var element = document.getElementById("crestDiv"); 

    //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); 
}

источник

2016-12-06 13:14:53

Я не уверен, насколько эффективен jsfiddle из-за отсутствия локальных сохраненных изображений и т. Д., Но здесь вы идете http://jsfiddle.net/v8g86cpe/ – Jayson

Стиль применяется к элементу. Но вам нужно изменить атрибут CSS от «font-color» до «color» –

Я обновил вашу скрипку [здесь] (http://jsfiddle.net/v8g86cpe/1/) –

Назначение CSS-идентификатора для созданного Javascript элемента

ответ

Смежные вопросы