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");  
  }
});

代码的值：＆＃34;让t = $（＆＃39;＃p＆＃39;）。css（＆＃34; color＆＃34;）;＆＃34;是＆＃34; rgb（255,255,0）＆＃34;。哪个好，但我可以在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>

如何使用JS / JQuery获取有用的css属性数据？

2 个答案: