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";

Answer 2

欢迎堆栈溢出！要更有效地学习并获得更好的帮助，请阅读https://stackoverflow.com/help/how-to-ask;例如。尝试将问题减少到仍然包含问题的最小示例；例如：

由于data的加载正确，所以一直困扰着问题
元素的嵌套可能会影响样式，尽管首先尝试最简单的情况（此处问题仍然存在，只有2个而不是6个嵌套元素）
类没有更改结果（因此已删除问题）
提供所需的上下文（在本例中为添加的html元素），因此我们可以运行和测试代码

const contents = "some text"

const li = document.createElement('li');
const p = document.createElement('p');

p.innerHTML = contents;
li.append(p);

const css = {"background": "red"};
li.style.cssText = css;

document.querySelector('#contacts').appendChild(li);

<div id="contacts"></div>

运行此代码段，我们可以看到内容已正确添加到页面中，尽管没有任何样式。因此，我们可以得出结论，该问题与以下几行有关：

const css = {"background": "red"};
li.style.cssText = css;

考虑到这一点，我们可以进一步简化问题：

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = {"background": "red"}

<div id="contacts"></div>

现在，运动部件更少了！现在我们知道div.style.cssText = {"background": "red"}包含了这个问题，因为其他行都在工作（运行代码时，它显示文本“应该是红色”，尽管它没有设置颜色）。我们也知道div是有效的，因为它的行较早。

在cssText上进行搜索，我们可以找到以下文档： https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

DOMString类型的文本，可解析的文本表示形式声明块（不包括周围的花括号）。设置此属性将导致解析新值，并且重置声明块中的所有属性，包括删除或添加属性。

换句话说，该值应为字符串（格式为.css文件或<div style="what: you; write: here;"> ...中的字符串），而不是javascript对象。

应用此更改：

const div = document.querySelector('#contacts')
div.innerText = "should be red"
div.style.cssText = "background: red; padding: 20px;"

<div id="contacts"></div>

...给我们我们的结果！也就是说，提出一个更简单的问题的过程通常会得出答案：）

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

2 个答案: