如何使用Javascript向动态创建的元素添加内联CSS？

我想在生成的左右消息中添加内联CSS，例如左文本为红色，右文本为蓝色。（我知道最好在CSS中设置样式，但我正在测试其他东西）。因此，我将使用以下HTML：

<ul class="messages">
  <li class="message left appeared">
    <div class="text_wrapper">
      <p class="text" style="color:red;">blabla</p>
    </div>
  </li>
  <li class="message right appeared">
    <div class="text_wrapper">
      <p class="text" style="color:blue;">blabla</p>
    </div>
  </li>
</ul>

*{
框大小：边框框；
}
.聊天窗口{
位置：绝对位置；
宽度：计算（100%-20px）；
最大宽度：600px；
高度：440px；
背景色：#fff；
左：50%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
边框：1px实心#ddd；
溢出：隐藏；
}
.留言{
位置：相对位置；
列表样式：无；
填充：20px 10px 0 10px；
保证金：0；
高度：347px；
溢出：滚动；
}
.留言，留言{
明确：两者皆有；
溢出：隐藏；
边缘底部：20px；
过渡：所有0.5s线性；
不透明度：0；
}
.messages.message.left.text\u包装器{
背景色：#ddd；
左边距：20px；
}
.messages.message.left.text_包装：：之后，.messages.message.left.text_包装：：之前{
右：100%；
右边框颜色：#ddd；
}
.messages.message.left.text，
.messages.message.right.text{
颜色：#000；
保证金：0；
}
.messages.message.right.text\u包装器{
背景色：#ddd；
右边距：20px；
浮动：对；
}
.messages.message.right.text\u包装：：之后，.messages.message.right.text\u包装：：之前{
左：100%；
左边框颜色：#ddd；
}
.messages.message.com已出现{
不透明度：1；
}
.messages.message.text\u包装器{
显示：内联块；
填充：20px；
宽度：钙（100%-85px）；
最小宽度：100px；
位置：相对位置；
}
.messages.message.text\u包装器：：之后，.messages.message.text\u包装器：之前{
顶部：18px；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.messages.message.text_包装器：：after{
边框宽度：13px；
边际上限：0px；
}
.messages.message.text_包装器：：before{
边框宽度：15px；
页边顶部：-2px；
}
.messages.message.text_包装器.text{
字号：18px；
字体大小：300；
}
.底部包装{
位置：相对位置；
宽度：100%；
背景色：#fff；
填充：20px 20px；
位置：绝对位置；
底部：0；
}
.bottom\u wrapper.message\u input\u wrapper{
显示：内联块；
高度：50px；
边框：1px实心#bcbdc0；
宽度：计算（100%-160px）；
位置：相对位置；
填充：0 20px；
}
.bottom\u wrapper.message\u input\u wrapper.message\u input{
边界：无；
身高：100%；
框大小：边框框；
宽度：计算（100%-40px）；
位置：绝对位置；
轮廓宽度：0；
颜色：灰色；
}
.底部包装。发送消息{
宽度：140px；
高度：50px；
显示：内联块；
背景色：#ddd；
边框：2px实心#ddd；
颜色：#000；
光标：指针；
过渡：所有0.2s线性；
文本对齐：居中；
浮动：对；
}
.bottom_wrapper.send_消息：悬停{
颜色：#000；
背景色：#fff；
}
.bottom_wrapper.send_message.text{
字号：18px；
字体大小：300；
显示：内联块；
线高：48px；
}
.message\u模板{
显示：无；
}

邮寄

使用jQuery，您可以向元素添加内联样式

$(".left").attr("style","whatever");
$(".right").attr("style","whatever");

您还可以添加：

$(".left").css("color", "yellow");
$(".right").css("color", "blue");

---

您可以使用每个HTML组件的

classList

。简单地说，用class

left

（或

right

）选择DOM元素，并使用

add

方法分配任何类：

var elementLeft = $('.left')
elementLeft.classList.add('yourClass')

您还可以使用方法

remove

删除任何类，或

toggle

切换某些类

elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')

---

包含更多的示例。此解决方案不使用jQuery或其他javascript库，但使用标准API。

此解决方案有效！但是，是否可以添加选择器，例如，不只是使用

.left

，而是使用

.left.text

或

.left p

？谢谢，似乎只有在我选择文本而不是左或右容器时才有效。@redibis您的意思是选择子对象？是的，您可以通过添加子选择器来导航树>$（“.left p”）请参见：还有多个选择器由逗号$（“.left、.right、.custom”）分隔@redibis我看不到程序在工作，如果您发布完整的代码，我可以检查，但我希望这个答案解释了如何使用jQuery选择元素。对不起，应该是：.left>p

$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');