Изменение CSS через JavaScript не отражено в пользовательском интерфейсе ⇐ Javascript

[Anonymous]

У меня есть следующая панель навигации:

Код: Выделить всё

[url=index.html]W[/url]

[list]
[*][url=index.html]Home[/url]
[*][url=c.html]C[/url]
[*][url=d.html]d[/url]
[*][url=f.html]f[/url]
[*][url=l.html]l[/url]
[*][url=t.html]Test[/url]
[*]
[*]Ita
[*]ptr
[/list]

test



< /code>
и это css: < /p>
.fh5co-nav {
position: absolute;
top: 0;
margin: 0;
width: 100%;
padding: 40px 0;
z-index: 1001;
}

@media screen and (max-width: 768px) {
.fh5co-nav {
padding: 20px 0;
}
}

.fh5co-nav .container {
display: flex;
width: 50%;
justify-content: space-between;
}

@media screen and (max-width: 768px) {
.fh5co-nav .container {
width: 100%;
justify-content: unset;
}
}

.fh5co-nav #fh5co-logo {
font-size: 40px;
margin: 0;
padding: 0;
line-height: 40px;
font-family: "Sacramento", Arial, serif;
margin-right: 5px;
}

.fh5co-nav a {
padding: 5px 10px;
color: #fff;
}
@media screen and (max-width: 768px) {
.fh5co-nav .menu-1, .fh5co-nav .menu-2 {
display: none;
}
}
.fh5co-nav ul {
padding: 0;
margin: 2px 0 0 0;
}
.fh5co-nav ul li {
padding: 0;
margin: 0;
list-style: none;
display: inline;
}
.fh5co-nav ul li a {
font-size: 14px;
padding: 30px 10px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

.fh5co-nav ul li a:hover, .fh5co-nav ul li a:focus, .fh5co-nav ul li a:active {
color: white;
}
.fh5co-nav ul li.has-dropdown {
position: relative;
}
.fh5co-nav ul li.has-dropdown .dropdown {
width: 130px;
-webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 40px;
left: 0;
text-align: left;
background: #fff;
padding: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.fh5co-nav ul li.has-dropdown .dropdown:before {
bottom: 100%;
left: 40px;
border: solid transparent;
content: "  ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.fh5co-nav ul li.has-dropdown .dropdown li {
display: block;
margin-bottom: 7px;
}
.fh5co-nav ul li.has-dropdown .dropdown li:last-child {
margin-bottom: 0;
}
.fh5co-nav ul li.has-dropdown .dropdown li a {
padding: 2px 0;
display: block;
color: #999999;
line-height: 1.2;
text-transform: none;
font-size: 15px;
}
.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
color: #000;
}
.fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a {
color: #fff;
}
.fh5co-nav ul li.btn-cta a {
color: #F14E95;
}
.fh5co-nav ul li.btn-cta a span {
background: #fff;
padding: 4px 20px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
}
.fh5co-nav ul li.btn-cta a:hover span {
-webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}
.fh5co-nav ul li.active > a, #fh5co-offcanvas li.active a  {
color: #fff !important;
}

Я хотел бы использовать следующий JavaScript для создания кнопки, а с идентификатором исчезает.

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function () {
const testB = document.getElementById("testb")
testB.addEventListener("click", function (){
console.log("click");
const tLink = document.getElementById('tLink');
tLink.style.setProperty('display', 'none', 'important');
tLink.style.setProperty('visibility', 'hidden', 'important');
tLink.style.setProperty('opacity', '0', 'important');
console.log(window.getComputedStyle(tLink).display);
testB.style.display = "none";
});
});

Почему кнопка исчезает, а нет? window.getComputedStyle(tLink).display возвращает «none», как и ожидалось, но в инструментах браузера я не вижу никакого свойства «display», присвоенного .

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-the-ui