Question

给定一个HTML Element对象，是否可以向它添加两次相同的样式属性而不必诉诸字符串操作？

请考虑以下示例：

<div style="width: 90%; width: calc(100% - 5em);"></div>
<h1 style="font-weight: bold; font-weight: 800;"></h1>
<p style="color: #cccccc; color: rgba(255, 255, 255, 0.8);"></p>

据我所知，通过.style属性（例如element.style.color = "blue"）或.style.setProperty方法（例如element.style.setProperty("color", "blue")）设置样式会覆盖现有的样式属性而不是附加它们。

对同一属性的多个定义允许我们利用CSS的级联性质，让我们在它们可用时使用更现代的CSS属性值，同时优雅地回归到“足够好”的值，其中最近添加了不受支持。但是，我能看到做这样的事情的唯一方法是通过手动字符串操作。

Answer 1

除非您使用某些自定义JavaScript功能，否则您想要做的是。

我想这是因为 CSS特异性的工作方式。

特异性是浏览器决定哪个CSS属性的方法值与元素最相关，因此也是如此应用。当特异性等于任何倍数时声明，在CSS中找到的最后一个声明应用于元件。特异性仅适用于相同元素的目标多个声明。资源： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

因此，当您在property属性中添加相同的style两次时，由于特异性，将应用第二个.style.setProperty("propertyName", "propertyValue")。知道了这个“逻辑”的概念。使用element.style.propertyName = "propertyValue"或private void AvoidDuplicate() { for (int i = 0; i < grdView.Rows.Count; i++) { TextBox txtoldvalue = grdView.Rows[i].FindControl("txtLicenseNumber") as TextBox; string oldvalue = txtoldvalue.Text.ToString(); Label txtoldvalueJ = grdView.Rows[i].FindControl("lblJurisdiction") as Label; string oldvalueJ = txtoldvalueJ.Text.ToString(); if (oldvalue != "" || oldvalueJ !="") { for (int j = 0; j < i; j++) { TextBox txtnewvalue = grdView.Rows[j].FindControl("txtLicenseNumber") as TextBox; string newvalue = txtnewvalue.Text.ToString(); Label txtnewvalueJ = grdView.Rows[j].FindControl("lblJurisdiction") as Label; string newvalueJ = txtnewvalueJ.Text.ToString(); if (oldvalue != newvalue && oldvalueJ != newvalueJ) { grdView.Rows[i].Visible = true; } else { grdView.Rows[i].Visible = false; } } } } }设置属性时Javascript的行为。是覆盖同一属性（如果已存在），而不是添加新属性。

Answer 2

有很多方法可以完成您在问题中提到的任务。（仍然想知道特殊情况在哪里）。

最干净的可能就是直接在CSS文件中使用类另一个是通过在文档中附加动态创建的规则的<style>元素您甚至可以将新规则附加到当前document.styleSheets。

但我只关注你问题的前提。

首先，要获得与代码块完全相同的标记，您只需使用element.setAttribute('style', 'prop1: val1; prop1:val2; prop1:val3')。
与之相同的规则将适用。
其次，将忽略通过js为元素style属性设置无效值，就像在CSS中一样。

＆＃13;

document.body.style.backgroundImage = 'url("http://fakeserver.com/myGradientFallback.png")';
document.body.style.backgroundImage = 'linear-gradient(to right, #499bea 0%,#ff51fc 53%,#207ce5 100%)';
document.body.style.backgroundImage = 'awesome-property-that-your-browser-doesnt-support-yet(100%)';

＆＃13;

因此，您可以安全地使用与js脚本中的CSS相同的级联。

在Javascript中，是否可以将两次样式属性添加到元素中？

2 个答案: