能否通过JavaScript为元素设置重复的行内CSS属性？

答案是肯定的，但实际效果和你在外部/内部CSS里写重复属性的逻辑有差异：行内样式中重复定义的属性，最终只会让最后一个属性值生效，而且浏览器不会像解析样式表那样，为不支持新属性的情况保留旧值。

下面分两种常见的JS设置行内样式的方式来具体说明：

1. 直接操作元素的style对象 #

当你通过element.style.属性名赋值时，本质是在修改元素的CSSStyleDeclaration对象。每次赋值都会直接覆盖该属性之前的值，不管你重复设置多少次，最终行内样式里只会保留最后一次的赋值结果。

示例代码：

const myElem = document.getElementById('test-element');
// 第一次设置
myElem.style.backgroundColor = '#FFFFFF';
// 第二次设置会直接覆盖前一次的值
myElem.style.backgroundColor = 'color-mix(in srgb, #FFF, #000)';

最终元素的行内样式只会显示background-color: color-mix(in srgb, #FFF, #000);，之前的#FFFFFF会被完全覆盖。

2. 通过setAttribute设置完整的style字符串 #

如果你用element.setAttribute('style', '属性1: 值1; 属性1: 值2;')的方式，浏览器解析这个style字符串时会遵循CSS的层叠规则——后面的属性定义会覆盖前面的。虽然你在DOM的style属性里可能会看到完整的重复字符串，但实际生效的还是最后一个值。

示例代码：

myElem.setAttribute('style', 'background-color: #FFF; background-color: var(--custom-bg);');

此时元素的行内样式会显示完整的字符串，但浏览器渲染时只会使用var(--custom-bg)的值。不过这种方式有个弊端：它会完全替换掉元素原有的行内样式，不像操作style对象那样可以单独修改某个属性。

关于兼容性回退的建议 #

如果你想实现类似CSS里的兼容性回退（旧浏览器用旧属性，新浏览器用新属性），直接设置重复的行内属性并不能达到预期——因为不管浏览器支不支持新值，最后一个值都会覆盖前面的。更可靠的方式是用特性检测：

const myElem = document.getElementById('test-element');
// 检测浏览器是否支持新的属性值
if (CSS.supports('background-color', 'color-mix(in srgb, red, blue)')) {
  myElem.style.backgroundColor = 'color-mix(in srgb, red, blue)';
} else {
  // 不支持的话回退到旧值
  myElem.style.backgroundColor = '#800080';
}

这种方式可以精准判断浏览器的支持情况，比依赖重复属性覆盖更可控。

内容的提问来源于stack exchange，提问作者Mathias Lykkegaard Lorenzen