Jquery 使用.css()设置高度样式的问题

Jquery 使用.css()设置高度样式的问题,jquery,css,plugins,Jquery,Css,Plugins,我正在做一个关于基本jQuery插件的教程。我花了很长时间试图弄明白为什么我的代码没有改变我的的高度 本练习要求创建一个插件,该插件将设置传入元素的高度,而不使用.height() 虽然下面的小插件不会改变高度,但如果我简单地将.css()中的height属性翻转为类似margin的内容,它就可以完美地工作 我错过了什么 <body> <p>Hello</p> <script src="https://ajax.googleapis.co

我正在做一个关于基本jQuery插件的教程。我花了很长时间试图弄明白为什么我的代码没有改变我的

的高度

本练习要求创建一个插件,该插件将设置传入元素的高度,而不使用
.height()

虽然下面的小插件不会改变高度,但如果我简单地将
.css()
中的
height
属性翻转为类似
margin
的内容,它就可以完美地工作

我错过了什么

<body>
    <p>Hello</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        (function($, window, document, undefined) {
            $.fn.setHeight = function(hgt) {
                return this.each(function() {
                    $(this).css('height', hgt);
                });
            };
        })(jQuery, window, document);
    </script>
    <script>
        $("p").setHeight(200)
    </script>
</body>

你好

(函数($,窗口,文档,未定义){ $.fn.setHeight=函数(hgt){ 返回此值。每个(函数(){ $(this.css('height',hgt); }); }; })(jQuery、窗口、文档); $(“p”).设置高度(200)
在这里我要做两件事:

首先,我要确保将
p
标记的
display
属性显式设置为
display:inline block
display:block
,以防在其他地方修改

第二,这是更重要的部分,更改传递给插件的高度值,
hgt
,使其成为一个附加了单位(
px
pt
em
,等等)的字符串

祝你好运,如果你还有任何问题,请告诉我!:)


更新

让我们从简化插件开始。试试这个,让我知道结果是什么:

(function($, window, document, undefined) {
    $.fn.setHeight = function(hgt) {
        $(this).css('height', hgt);
    };
})(jQuery, window, document);

这是一个更新版本。

在最新版本的Chrome中运行时效果良好。我在
p
标记中添加了一个边框颜色,以便您可以看到高度的增加。您使用的浏览器是什么?您是否尝试过$(this).css({'height':hgt})如果缺少一个单元,某些浏览器可能会抱怨。你试过200像素而不是200像素吗?如果不显示边框,你怎么判断高度是错误的?我在你的小提琴中添加了一个border属性,看起来它正在工作。看@Barmer,你说得对。我对这个错误感到非常非常抱歉。我现在看到了。请原谅我!为什么边距、填充等不需要指定px?仍然需要尝试您的建议。尝试添加px和两个显示属性,但仍然没有成功。如果您查看jQuery源代码,px实际上是默认设置的,这就是我留空的原因。最终,如果您覆盖了
display
属性,那么
margin
padding
仍然有效,但
height
将无效。jQuery可以做一些工作来继承单元。(注意:我删除了我的原始评论,因为虽然准确,但我不知道它是否与这种情况相关,因为我认为可能有其他技术允许某些房地产不使用这些单元)好的,我会继续查找。在我继续之前,您是否尝试过使用
进行测试!重要信息
对于
显示
属性,以防您的CSS仍被覆盖?非常非常抱歉。我看到通过增加边界,现在它开始工作了。多么愚蠢的初学者错误。。。很抱歉浪费你的时间。请原谅我。