Question

我想将js变量传递给css属性值，我试过但看起来很奇怪，

所以我无法理解如何做到这一点。

$('.show-nav').click(function(){
    var text = $(this).text() == 'Toggle Navigation' ? 'Close' : 'Toggle Navigation';
    $(this).text(text);
    $('nav').toggleClass('show');
    navHeight = $('nav').css('height');
});
<style type="text/css">
    .show {
        height: //need js value here, assuming navHeihgt;
    }
</style>

提前多多感谢。

更新

这是我在媒体查询中的css

@media only screen and (min-width: 150px) and (max-width: 800px){

 #nav {
    height:0;
    overflow:hidden;
    transition:height linear 500ms;
    -webkit-transition:height ease-in-out 500ms;
 }

 .show {
    height:auto !important;
    transition:height linear 500ms;
    -webkit-transition:height ease-in-out 500ms;
 }
}

你可以看到我的#nav没有隐藏高度：0;并且当触发click事件时，.show类被分配给它，并且当它的高度返回时它将显示回来。

但它没有通过使用auto值赋值来制作动画，但是当我选择任何其他特定值而不是自动时，它将设置动画。但它不是使用自动值的动画，这就是为什么我要尝试它。

Answer 1

您不需要在CSS中定义样式，您可以这样做：

$('.show').height(navHeight);

提供其他说明 - 当用户点击show-nav课程时，nav元素的高度将存储在navHeight变量中。然后，您可以使用此jQuery将此高度应用于show类。

Answer 2

$('.show-nav').click(function(){
    var text = $(this).text() == 'Toggle Navigation' ? 'Close' : 'Toggle Navigation';
    $(this).text(text);
    $('nav').toggleClass('show');
    navHeight = $('nav').css('height');
    $('.show').css('height', navHeight);
});

Answer 3

你不能这样做。但是，您可以执行类似

的操作

$('.show').css('height', navHeight);

Answer 4

无法将javascript变量值分配给css属性。

您需要使用，

   var navHeight = $('nav').css('height');
   $('.show').height(navHeight);

但在检查开发人员工具中的元素时，它会显示为内联css。

如果您希望为导航和.show-nav选择器添加相同的高度，请尝试将此包含在公共容器中，并为nav元素添加height：auto。

如何将jquery变量值传递给css属性值？

4 个答案: