Question

所以我的任务是为现场网站创建一个模态作为测试。我正在使用Chrome的“Customer Javascript for Websites”或“CJS”扩展程序来试用我的文件。

现在，从我搜索的内容来看，似乎我做的一切都很好，但我的css元素没有被应用到div。所以，看看这个：

function modalElement() {
  var $container = $("#container");
  var $modalHtml = $("<div class='modal'><p>HELLO</p></div>");

  $(function() {
    $(".modal").css({
      height: "425px",
      width: "425px",
      border: "5px solid black"
    });
  });
  $container.append($modalHtml);
}

'HELLO'显示在页面底部，因此正在追加div，但没有应用任何css元素。我已经尝试将高度，宽度，边框放在引号内，并删除$(function()行。还尝试$modalHtlm.find(".modal").css(({}))，但这也不起作用。

有什么建议吗？谢谢！

Answer 1

我认为你的风格不起作用，因为在你在DOM上附加html之前执行了以下功能，所以$（＆＃39; .modal＆＃39;）找不到任何匹配。

$(function() {
   $(".modal").css({
     height: "425px",
     width: "425px",
     border: "5px solid black"
    });
});

请改为尝试：

function modalElement() {
  var $container = $("#container");
  var $modalHtml = $("<div class='modal'><p>HELLO</p></div>");

  // Append the modal to the DOM
  $container.append($modalHtml);

  // Then execute the style function
  $(function() {
    $(".modal").css({
      height: "425px",
      width: "425px",
      border: "5px solid black"
    });
  });
}

Answer 2

为什么不直接将样式放在CSS样式表中？

.modal {
  height: 425px;
  width: 425px;
  border: 5px solid black;
}

检查浏览器中的模态以查看是否有其他选择器覆盖这些样式。

Answer 3

我的猜测是你可能还没有将元素添加到页面中。这意味着您可能正在尝试将类添加到DOM上尚不存在的元素。尝试在添加样式

之前先添加元素

Answer 4

$modalHtml.css()，而不是$modalHtml.find().css()，因为find()找到了孩子，它不是自己的孩子，所以它找不到你想要的东西。

您也可以将第二个参数传递给jQuery()，告诉它在创建元素时使用哪些属性

$("<div class='modal'><p>HELLO</p></div>",{
  css: {
    height: "425px",
    width: "425px",
    border: "5px solid black"
  }
});

另外

$(function() {
  $(".modal").css({
    height: "425px",
    width: "425px",
    border: "5px solid black"
  });
});
$container.append($modalHtml);

这不起作用，因为在$(function(){})内的代码运行之前元素尚未添加到DOM中。所以它没有找到元素以便将css放到。

CSS未应用于jQuery类元素

4 个答案: