Интересует вопрос, как можно при помощи JS узнать цвет элемента и заменить его на background-color: blue
HTML
<header class="header">
<nav class="header__nav">
<a href="#">
<div class="header__element">
about us
</div>
</a>
<a href="#">
<div class="header__element">
how it work
</div>
</a>
<a href="#">
<div class="header__element">
select your skills
</div>
</a>
<a href="#">
<div class="header__element">
contact
</div>
</a>
</nav>
<div class="header__authorization">
<div class="header__signIn">
sign in
</div>
<div class="header__signUp" onmouseover="hover()" onmouseout="hover_out()">
sign up
</div>
</div>
</header>
CSS
.header {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 10vh;
background-color: #fff; }
.header__element {
padding: 0 20px;
margin: 10px;
border-right: 2px solid #ffce41;
color: #ffce41; }
.header__element:hover {
color: #ffce41; }
.header__nav, .header__authorization {
display: flex;
flex-direction: row;
text-transform: uppercase; }
.header__signUp, .header__signIn; {
border: 1px solid #ffce41;
padding: 7px 10px;
border-collapse: collapse; }
.header__signIn {
border-radius: 5px 0px 0px 5px;
background-color: #ffce41; }
.header__signIn:hover {
background-color: #fff; }
.header__signIn:hover ~ .header__signUp {
background-color: #ffce41; }
.header__signUp {
border-radius: 0px 5px 5px 0px; }
.header__signUp:hover {
background-color: #ffce41; }
getComputedStyle
: во-первых - только для чтения, во-вторых - выдаёт значения в своём формате (например, значение цвета в Chrome возвращает в форматеrgba()
, независимо от того, как Вы задали ему первоначальное значение#rrggbb
илиyellow
). Также с размерами - всё в итоге приводится к пикселям.