是否有一种基于当前值更改css值的简单方法？

Question

目前我正在做的是:

    if ($( "#htmlBox" ).css("display") == "block") {
        $( "#htmlBox" ).css("display", "none");
    } else {
        $( "#htmlBox" ).css("display", "block");
    }

我想知道在这两个值之间切换的更快捷方式是什么.

Answer 1

在这种情况下,您可以使用toggle()在可见和隐藏显示状态之间来回切换:

$("#htmlBox").toggle();

如果您确实想要使用css()它,那么您可以在函数中提供新值,您可以使用该函数执行您需要的任何逻辑.此函数还接受当前值作为参数:

$('#htmlBox').css('display', function(i, state) {
  return state === 'none' ? 'block' : 'none';
});

一般来说,最好避免css()在可能的情况下使用,因为UI样式应该仅保留在CSS中.将其放入JS可能会导致维护问题.以这种方式完成后,最好使用toggleClass().