Jquery 使用.css()设置高度样式的问题
我正在做一个关于基本jQuery插件的教程。我花了很长时间试图弄明白为什么我的代码没有改变我的Jquery 使用.css()设置高度样式的问题,jquery,css,plugins,Jquery,Css,Plugins,我正在做一个关于基本jQuery插件的教程。我花了很长时间试图弄明白为什么我的代码没有改变我的的高度 本练习要求创建一个插件,该插件将设置传入元素的高度,而不使用.height() 虽然下面的小插件不会改变高度,但如果我简单地将.css()中的height属性翻转为类似margin的内容,它就可以完美地工作 我错过了什么 <body> <p>Hello</p> <script src="https://ajax.googleapis.co
的高度
本练习要求创建一个插件,该插件将设置传入元素的高度,而不使用.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仍被覆盖?非常非常抱歉。我看到通过增加边界,现在它开始工作了。多么愚蠢的初学者错误。。。很抱歉浪费你的时间。请原谅我。