jQuery 插件：.append() 将元素添加到 DOM 但元素不可见？

Question

我正在尝试编写我的第一个 jQuery 插件，但很早就遇到了障碍。我的插件的第一部分需要将一个 div 添加到另一个 div 中。它确实这样做了，我可以在开发人员工具中看到内部 div 是前置的，但它在屏幕上是不可见的（即使开发人员工具说它具有所有必要的样式并已附加）。

这是我的插件代码：

(function($) {

$.fn.skillBarLoad = function( ) {

    var prependedSkillBar = $("<div></div>");

    prependedSkillBar.css({
        "color": "#f9f9f9",
        "height": "100%",
        "width":  "100%"
    });

    return this.each( function() {
        $(this).prepend(prependedSkillBar);
    });

}

}(jQuery));

在此先感谢您的帮助。

Answer 1

您设置的颜色属性仅适用于 div 内的文本。尝试设置背景颜色，例如：

prependedSkillBar.css({
    "background-color": "#f9f9f9",
    "height": "100%",
    "width":  "100%"
});

jQuery 插件：.append() 将元素添加到 DOM 但元素不可见？

jQuery plugin: .append() adds element to DOM but element is not visible?

jquery

frontend