javascript - JQuery css属性不起作用

Question

$("#content-container-2").css('min-height', '1000px');
$('#content-container-2').attr('style','min-height:1000px;');

两者都不起作用。但是，通过样式表设置它就可以了。当使用带有上述命令的 jquery 并使用 firebug 检查 css-properties 时，它们也根本没有显示 min-height 已设置。最后但并非最不重要的一点是，打印出：

console.log($("#content-container-2").height());
console.log($("#content-container-2").outerHeight());
console.log($("#content-container-2").innerHeight());

在所有情况下都返回 null。

有人知道这是为什么吗？

Answer 1

返回 null的唯一方法.height()是找不到元素。

如果您的#content-container-2元素是通过 ajax 调用添加到页面中的，那么您必须在 ajax 调用的成功回调中运行您的代码。
（如果您使用模板引擎并且模板尚未注入 DOM，也会发生同样的情况）

您必须确保它$ 属于jQuery 而不是另一个库

---

用于调试尝试

var el = $('#content-container-2');
console.log( $ === jQuery, $.fn.jquery, el, el.height() );

Answer 2

这可能意味着您的 jquery 没有找到该特定 ID。你确定你拼写正确并且你确定它不是一个类而不是 id 吗？

没有匹配项时，jQuery 返回 null。

另一个考虑因素是您的 jQuery 在页面准备好之前被调用。要在页面加载后运行 jQuery，请使用以下命令：

$(function(){
     //Your code goes here.
});

该代码块内的所有内容都将在页面加载后执行。

Answer 3

设置属性：

$('#content-container-2').attr('style','min-height:1000px;');

获取价值：

$('#content-container-2').attr('style');

如果不起作用，请检查您的 jquery 是否被正确引用。

Answer 4

您需要以 javascript 理解的方式指定最小高度：

$("#content-container-2").css({'minHeight': '1000px'});