К стилям, прописанным непосредственно в style
можно обратиться через свойство style
:
document.querySelector('button').addEventListener('click', function (e) {
var div = document.querySelector('div')
div.style.display = div.style.display === 'none' ? 'block' : 'none'
})
<button>Click me</button>
<div style="display: none">Какой-то текст</div>
Но конкретно с показом и скрытием гораздо лучше воспользоваться свойством hidden
, надо только не забыть прописать для соответствующего атрибута !important
в стилях - это позволит переключать видимость элементов независимо от того, какой display стоял изначально:
document.querySelector('button').addEventListener('click', function (e) {
var div = document.querySelector('div')
div.hidden = !div.hidden
})
[hidden] {
display: none !important;
}
<button>Click me</button>
<div hidden style="display:flex">Какой-то текст</div>
PS: Само собой, поиск элементов по тегу - это только для примера.