javascript 可以在CSS中使用三元运算符吗?

w80xi6nr  于 2023-03-11  发布在  Java
关注(0)|答案(3)|浏览(191)

我有这样的条件:

$scope.toggleSlider = function() {
  $('.sliderButton').css('left','0') ?
     $('.sliderButton').css('left', '173px')
   : $('.sliderButton').css('left', '0')
}

每当我点击toggleSlider方法时,三元条件应该执行。对吗?

uujelgoq

uujelgoq1#

您应该使用

$scope.toggleSlider = function() {
  $('.sliderButton').css('left', $('.sliderButton').css('left') === '0' ? '173px' : '0');
}
2admgd59

2admgd592#

你几乎是在那里,但你应该得到的价值和检查,而不是设置

$('.sliderButton').css('left') == '0px' ?$('.sliderButton' . ........

注意:无论你在css中添加了什么,你都可以得到它。例如:如果你的css说自动,你可能会得到auto

mwg9r5ms

mwg9r5ms3#

(this邮件地址是标题中所问的问题,而不是问题中的实际代码)
在现代网络的某些情况下,你可以通过使用额外的CSS变量来模仿纯CSS中的三元运算符。

left: calc(
  0px * var(--myVariable)
  + 173px * (1 - var(--myVariable))
);

然后确保--myVariable1(如果要使用第一个加数)或0(如果要使用第二个加数)。
如果您有复杂的计算或希望避免更改CSS属性值本身,则此功能特别有用。
1:这种方法只适用于计算 * 或 * 在一个值和initial之间切换的情况。它不能在两个值之间任意切换(如redblue)。如果CSS实现了切换或if语句,将来可能会有更通用的切换。

相关问题