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

我想把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>

你可以看到我的导航没有隐藏高度：0；当点击事件被触发时，该.show类被分配给该类，当其高度恢复时，该类将显示出来

---

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

你不能这样做。但是，您可以执行以下操作

$('.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);
});

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

---

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

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

---

提供额外解释-当用户单击show nav类时，导航元素的高度将存储在navHeight变量中。然后可以使用此jQuery将此高度应用于show类

无法将javascript变量值指定给css属性

要么你需要使用

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

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

---

如果您希望为nav和.show nav选择器添加相同的高度，请尝试在公共容器中同时包含这两个选项，并为nav元素添加高度：auto

这会将navHeight设置为nav元素的高度，他想要相反的结果。我的答案与您提交的答案不一致吗？我的错，没有看到最后一行。@hsn0331我很想听听您在该陈述背后的推理。我甚至想不出任何其他方法来完成您正在尝试的操作。是否有任何其他方法可以在现有类中分配新属性，但不使用内联样式？是否要使用class show更改所有元素的样式，还是仅更改特定元素？因为更改样式声明中的值会更改与选择器匹配的所有元素的样式。不，仅限特定。只需将其值赋给内联，我不希望内联样式，当您打开类似chrome的源代码时，它将不会显示。show{height:100px；}我认为没有任何简单的方法可以满足您的要求。如果你使用Chrome Inspect Element工具F12，css就会出现，所以你仍然可以调试它；谷歌，微软，有线电视新闻网，随便你怎么说。不管你是否想要，你都必须接受这种风格。这将在内联风格中指定like element.style{display:block；}我不想要它。我认为情况并非如此。在这个演示中，除了height之外，没有添加任何内联样式：但是我不想作为inilnei如果您尝试在同一个容器中使用这两个元素和height:auto属性，内联css将不会显示。你试过了吗？

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