Переопределение родительского css после использования appendChild
Я видел несколько сообщений, предлагающих пометить !important в стиле css, чтобы переопределить родительский css. Но у меня такая ситуация: создается дочерний узел с помощью document.createElement, а затем appendChild к родителю:
let parentNode = document.getElementById('parentId')
let childNode = document.createElement('div')
childNode.id = 'childId'
parentNode.appendChild(childNode)
#parentId {
background-color: #6d7373;
width: 99%;
height: 40px;
}
#childId {
background-color: yellow;
width: 99%;
height: 40px;
}
В этом случае !important не работает. Родительский css по-прежнему доминирует. Есть ли способ сделать переопределение? Спасибо.
@Jacob Я даю ребенку уникальный идентификатор и стилизую его, используя этот идентификатор (цвет фона). Но это не отменяет.
@Taplar Это не работает в моем Электроне. Фон имеет серый цвет. Я вижу, что это работает на скрипке. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлено: установите идентификатор для дочернего элемента с помощью Element.setAttribute()
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
let parentNode = document.getElementById('parentId')
let childNode = document.createElement('div')
childNode.innerText = 'inner text'
childNode.setAttribute('id', 'childId')
parentNode.appendChild(childNode)#parentId{
color: red
}
#childId{
color: green
}<div id='parentId'></div>Спасибо. Можно ли как-нибудь использовать дочерний идентификатор вместо прямого >div? Я добавил больше деталей в свой вопрос.
Спасибо. Это то же самое, что и решение Taplar. Почему-то это не работает в моем приложении Electron. Я закрываю это в любом случае. Спасибо.
@TristanTran жаль это слышать. Вы пробовали childNode.id = 'childId' вместо setAttribute()? Если нет, вы можете открыть новый вопрос и указать, что он для Электрона.
Вы пытались дать своему ребенку класс, уникальный от родителя, и стилизовать его?