使用JavaScript按title属性选中元素后如何修改对应CSS样式

你已经拿到了目标DOM节点node，可以直接操作它的style属性修改内联样式，也可以通过添加自定义类绑定样式，两种常用方案如下：

方案1：直接修改内联样式 #

适合临时修改少量样式的场景，直接操作节点的style对象即可：

// 设置文本颜色为红色
node.style.color = 'red';
// 还可以按需追加其他样式，例如下方的字号、字重设置
node.style.fontSize = '20px';
node.style.fontWeight = 'bold';

如果需要一次性批量修改多个样式，也可以用cssText属性：

node.style.cssText = 'color: red; font-size: 20px; font-weight: bold;';

方案2：添加自定义类名绑定样式 #

适合样式规则多、需要复用或者要和CSS文件配合的场景。首先在你的CSS代码中定义好对应的样式类：

.discount-text {
  color: red;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
}

然后在JS里给目标节点添加这个类：

node.classList.add('discount-text');
// 后续需要移除样式时可以调用remove方法
// node.classList.remove('discount-text');

注意：如果样式没有生效，先检查querySelector是否真的选中了元素，可以加一行console.log(node)在控制台确认节点是否存在，避免节点还没渲染完成就执行JS代码导致选中结果为null的问题。

内容的提问来源于stack exchange，提问作者Murat erdoğan