点击按钮修改CSS伪元素:before样式的前端开发问题咨询

• 样式匹配错误：你CSS中定义的是.p类的样式，但HTML里的<p id="chatLog">没有添加class="p"属性，所以聊天气泡和伪元素的样式本身就没有生效到目标元素上。
• 伪元素无法直接通过JS操作：:before属于CSS伪元素，不是真实存在的DOM节点，无法通过element.style的方式直接修改它的样式，你只修改了父元素的背景色，伪元素里写死的白色边框不会同步变化。

这里提供两种常用实现方案： #

方案1：使用CSS变量（更灵活，适合动态修改任意颜色） #

修改CSS代码，用自定义属性替换写死的颜色值 #

body {
  background: #368dda;
}

.p {
  position: relative;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 24px;
  width: 300px;
  /* 定义气泡颜色变量，默认白色 */
  background: var(--bubble-color, #fff);
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: #000;
}

.p:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  /* 引用变量作为边框颜色 */
  border-left: 24px solid var(--bubble-color, #fff);
  border-right: 12px solid transparent;
  border-top: 12px solid var(--bubble-color, #fff);
  border-bottom: 20px solid transparent;
  left: 32px;
  bottom: -24px;
}

修改HTML，给元素添加对应类 #

<p id="chatLog" class="p"></p>

修改JS代码，同步修改CSS变量值 #

function changeColor() {
  const chatLog = document.getElementById('chatLog');
  // 给元素设置CSS变量，会同步应用到父元素和伪元素
  chatLog.style.setProperty('--bubble-color', 'red');
  return false;     
}

方案2：预定义样式类（更简单，适合固定的几种颜色切换） #

新增CSS样式类 #

/* 在原有CSS基础上新增 */
.p.red-bubble {
  background: red;
}
.p.red-bubble:before {
  border-left-color: red;
  border-top-color: red;
}

修改JS代码，直接添加类名 #

function changeColor() {
  document.getElementById('chatLog').classList.add('red-bubble');
  return false;     
}

内容的提问来源于stack exchange，提问作者Bill Colins