javascript – CSS未应用于jQuery类元素

2019年7月28日 147次阅读

所以我的任务是为现场网站创建一个模态作为测试.我正在使用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(({}))但这不起作用无论是.

有什么建议？谢谢！

最佳答案 我认为你的风格不起作用,因为在你在DOM上附加html之前执行了以下函数,所以$(‘.modal’)找不到任何匹配.

$(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"
    });
  });
}
点赞