Question

的所有人。

我非常确定我的问题的答案相对容易。

我的.css文件包含以下代码：

div.site
{
  text-align:center;
  border:2px solid #4b6c9e; 
  padding:1px;
  margin-top:10px;
  font-size:medium;
  font-family:Verdana;
  font-weight:bold;
  height:25px; 
}

然后，我有一个.js文件，用于从xml构建我的div。这是一个片段：

txt = txt + "<div class='site'><span class='link'><a class='nav' href=' " + siteUrl[0].firstChild.nodeValue + "' target='_blank'>" + siteName[0].firstChild.nodeValue + "</a></span></div>"

document.getElementById('portalLinks').innerHTML = txt;

我的.html文件包含以下内容：

<div id="portalLinks"></div>

我在页面上显示数据没有问题。我遇到的麻烦是从我的.css文件中获取site类的高度。我使用以下代码：

var height = $(".site").height();

我想要做的是使用此height来动态计算portalLinks的高度：

$("#portalLinks").css({ "height": newHeight }) - where newHeight will be calculated based on `height`

提前感谢。

Answer 1

你可以试试这个：

$("#portalLinks").css("height", newHeight);

另外，使用它来获得高度：

var height = $(".site").outerHeight(); // includes the stroke width

希望它有所帮助。

Answer 2

请记住，$(".site").height();返回的值不是完整的CSS高度值。这只是一个数字。

使用第一次调用的结果调用$("#portalLinks").css({"height": newHeight})会将无效值设置为25.您需要将单位附加到变量 - 在这种情况下，px：

$("#portalLinks").css({"height":newHeight+'px'});

另外，值得一提的是，仅此调用就会将#portalLinks的高度设置为一个 .site元素的高度。

如果要将高度设置为合计总数，则需要以某种方式迭代$('.site')的结果：

var newHeight = 0;
$(".site").each(function(){
    newHeight += $(this).height()
});

$("#portalLinks").css({"height":newHeight+'px'});

请参阅此小提琴，了解一个工作示例：http://jsfiddle.net/EZWX4/

其他注释： .height()返回CSS height属性的值。它不考虑填充和/或边界。

在某些情况下，这可能会导致一些显示问题，因此您应该考虑使用outerHeight()。

另外：使用outerHeight(true)将在结果中包含已定义的边距。

Answer 3

我明白了，伙计们。非常感谢大家的投入。我的问题是，在我的方法中，我试图首先获得site的高度，然后实际构建内容。这就是我无法获得高度值的原因。所以，基本上我就是动态构建我的html：

        var height = $(".site").height();
        var margin = $(".site").css("margin-top");
        var newHeight = (height * site.length) + (margin * site.lenght);

        $("#portalLinks").css({ "height": newHeight + "px" });

这完全适用于我的情况。

无法从css文件中检索height属性

3 个答案: