Question

如何在样式标记中使用javascript变量？我试过jQuery：

var height = $('.replyComment').height();
$('div.replyComment').append('<style>div.replyComment:before{content: ""; border-left: 1px solid #e1e1e1;position:absolute; left:38px; top:-20px; height:'+ height +';}</style>');

那我在哪里错了？我需要做什么来分配div中div的高度：在使用高度变量之前？

Answer 1

尝试将其附加到head。

$('head').append('<style>div.replyComment:before{content: ""; border-left: 1px solid #e1e1e1;position:absolute; left:38px; top:-20px; height:'+ height +'px;}</style>');

确保您必须将px添加到身高。

Answer 2

您可以使用jQuery的CSS功能

+-$

就像那样：

css({"propertyname":"value","propertyname":"value",...});

更多信息：jQuery Docs，W3Schools

Answer 3

试试这个。

jQuery('div.replyComment').css('height', height);

div.replyComment:before{
    content: ""; 
    border-left: 1px solid #e1e1e1; 
    position:absolute; 
    left:38px; 
    top:-20px; 
}

将css添加到样式表中，然后在需要时专门定位div高度。

Answer 4

从jQuery documentation，您可以看到如何使用height()，不仅可以获取元素的高度，还可以设置它也。只需将新的 height 作为参数传递：.height(value)

除此之外。设置内嵌 css样式不是一个好习惯。我宁愿使用jQuery中的jQuery.addClass()和jQuery.removeClass()函数来更改 HTML元素的样式。

对于您的示例，它看起来像这样：

CSS

.styles-to-add:before{
  content: ""; 
  border-left: 1px solid #e1e1e1; 
  position: absolute; 
  left: 38px; 
  top: -20px; 
}

的javascript

$('div.replyComment').addClass('styles-to-add');

然后你可以独立设置任何元素的高度，如：

var height = $('.replyComment').height();
$('div.replyComment:before').height(height);

如何使用样式标记在js中使用变量

4 个答案: