Javascript 在重新加载页面之前没有CSS样式-cssText不起作用

在重新加载页面之前，新生成的列表项不会继承css样式。通过cssText动态添加样式时已添加样式，但它不起作用

尝试了cssText，尝试了内联Jquery

  if (data.success) {
              console.log("Data success");
              // get the data that was returned.
              const contents = `${data.chatroom}`
              // create the dom tree under contacts
              const li = document.createElement('li');
              const div = document.createElement('div');
              const span = document.createElement('span');
              const div0= document.createElement('div')
              const p = document.createElement('p');
              const p0 = document.createElement('p');
              li.classList.add('contact');
              div.classList.add('wrap');
              div0.classList.add('meta');
              p.classList.add('name');
              p0.classList.add('preview');
              // setting innerHTML of new dom tree
              p.innerHTML = contents;
              div0.append(p);
              span.append(div0);
              div.append(span);
              li.append(div);
              var css = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};
              li.style.cssText = css;
              document.querySelector('#contacts').appendChild(li);

---

新生成的列表项应该动态生成填充、显示和游标，但什么都没有发生。

问题是这是一个对象

var css = {"padding": "15px 0 30px 18px", "display": "block", "cursor": "pointer"};

cssText需要一个字符串-请尝试这样做

li.style.cssText = "padding: 15px 0 30px 18px; display: block; cursor:pointer";

---

欢迎来到堆栈溢出！要更有效地学习并获得更好的帮助，请阅读；试着把问题减少到仍然包含问题的最小示例；例如：

因为数据加载正确，所以保留在问题中会分散注意力 元素的嵌套可能会影响样式设置，尽管首先尝试最简单的情况，但问题仍然存在，只有2个而不是6个嵌套元素 课程没有改变结果，因此问题被删除 在本例中，提供添加到的html元素所需的上下文，以便我们可以运行和测试代码 常量内容=一些文本 const li=document.createElement'li'； const p=document.createElement'p'； p、 innerHTML=内容； li.p； 常量css={背景：红色}； li.style.cssText=css； document.querySelector'contacts'.appendChildli；

---

似乎是JavaScript问题而不是CSS，请从标记中删除CSS。另外，我不太擅长JavaScript，但我相信问题出在data.success上，如果您告诉我们console.logData success是否被发送到console.cssText不是只读的？谢谢大家，看来我需要拿起一本教科书了。这是下一级的编程魔术，谢谢你们的澄清！我肯定会把我的问题保留在这个格式中，然后我如何添加类似：hover？在哪里可以阅读来获得这些信息？CSS:hover选择器是CSS的一部分，不可能通过Javascript以这种方式内联CSS样式。但是，当鼠标进入/离开元素时，您可以使用onmouseover和onmouseout事件并更改样式。谢谢。哇，这意味着即使您已经在引导中预构建了CSS，新创建的元素也无法在运行时或异步继承样式？这里有太多东西，我希望新元素能够继承。我得到的印象是，您想创建一个没有CSS文件的自包含Javascript，这就是为什么您首先要使用cssText。如果不是这样，那么这是正确的方法。li.style.className=chatRow；并且在CSS文件中有.chatRow{padding:15px 0 30px 18px；display:block；cursor:pointer}和.chatRow:hover{…}。这就是我使用的，但是因为它是通过Ajax的onload内部的Javascript创建的，所以这些CSS属性在页面刷新之前不会应用，我想这就是为什么我必须求助于自包含的JS。