Question

为什么这样的代码

var h = $('#searchcontainer').height();
$('#completeholder').css('height', h + 'px');

在HTML文件本身内部工作，而不是从.js文件加载时工作？我尝试在我的主文件中定义一个全局 var h; ，希望JS文件中的代码可以正常运行。有任何想法吗？谢谢:)）

编辑： This one does not work

This one works

查看代码顶部的评论:) 当您在工作页面上按下一步时，css会在最后调整大小，这是因为我将js文件导入主标题。

Answer 1

我猜这与它运行的时间有关。如果在加载页面之前运行它，那么对象将不会在页面中，也不会被找到。

要使该功能无论位于何处都能正常工作，请将其置于$(document).ready()之内：

$(document).ready(function() {
    var h = $('#searchcontainer').height();
    $('#completeholder').css('height', h + 'px');
});

如果您真正想要做的是在不同的$(document).ready(function()调用之间共享全局变量，那么您需要在$(document).ready(function()之外声明全局变量：

var myGlobal;

$(document).ready(function() {
    var myGlobal = $('#searchcontainer').height();
});

$(document).ready(function() {
    $('#completeholder').css('height', myGlobal + 'px');
});

这样的全局通常不是一个好主意，所以你真正应该做的是寻找一种方法来解决这个没有全局变量（比如将参数传递给函数调用）。

查看实际工作和非工作代码的一些观察结果：

您有多个具有相同ID的对象（例如contentholder）。通过id引用这些对象将无法可靠地工作，并且在HTML中被禁止。
在内联版本中，您在case 'NextQuestion1':块和case 'NextQuestion2Dance':中设置了完整者的高度，但您在外部JS版本中没有这样做。该代码似乎是修复它的原因。在我的浏览器中，高度在这些case语句中设置为479（正确的高度）。这在外部JS版本中不会发生，因此两个版本之间的代码不相同。

在外部JS文件中获取CSS值和变量？

1 个答案: