javascript - 在页面重新加载之前没有 CSS 样式 - cssText 不工作

Question

在页面重新加载之前，新生成的列表项不会继承 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);

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

Answer 1

问题是这是一个对象

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

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

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