Как получить полезные данные свойства css с помощью JS/JQuery?

Question

В настоящее время я работаю над простым кодом, чтобы получить свойство css текста, в котором атрибут цвета стиля был установлен во внешнем файле css. Я хочу использовать это свойство цвета для переключения между двумя цветами. Но, моя проблема - это информация о том, что css() возвращает его мне непригодным для использования.

HTML

<h1 id="p">Zzzzz</h1> 
<button type="button" id="button">click</button> 

CSS

h1{ 
    color:yellow; 
} 

Javascript

$('#button').click(function(){ 
    let t = $('#p').css("color"); 
    console.log(t); 

    //check returned color to toggle between two colors 
    if(t != "red"){ 
    $('#p').css('color','red'); 
    }else if(t != 'yellow'){ 
    $('#p').css('color','yellow'); 
    } 
    else{ 
    console.log("Dunno"); 
    } 
}); 

Значение, которое имеет код: «let t = $ ('# p'). Css (« color »); «rgb (255,255,0)». который хорош, и все, но я не могу использовать его в инструкции if, чтобы проверить, следует ли мне переключаться или нет. Что лучше для этого?

Answer 1

вы можете использовать возвращаемое значение, как это

if (t != 'rgb(255,255,0)') { 
    $('#p').css('color','yellow'); 
} else if (t != 'rgb(255,0,0)') { 
    $('#p').css('color','red'); 
} else { 
    console.log("Dunno"); 
} 

Answer 2

Привет, там!

Будет лучше переключиться на другой класс, не так ли?

$(function(){ 
 
    $('.toggle').bind('click', function(){ 
 
    $(this).toggleClass('toggle--active'); 
 
    }); 
 
});

.toggle { 
 
    border: 1px solid red; 
 
    background: pink; 
 
} 
 
.toggle.toggle--active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggle">Click me to toggle.</div>