在JavaScript中设置HTML元素的样式属性

Question

我有一堆旧的经典ASP页面，其中许多显示表格中的数据库数据。没有一个页面内置任何排序功能：您完全取决于原始开发人员使用的ORDER BY子句。

我正在通过客户端JavaScript快速修复这个问题，以添加排序功能。我已经编写了一个脚本，基本上做到了我所需的功能。然而，我仍然需要添加一点功能。这些页面中的表行通常具有交替的行颜色，用于实现此功能的机制在页面之间有所不同。它可能只是更改CSS类或样式可能已由ASP代码内联呈现。

目前，在对表进行排序后，每行保留其呈现颜色方案，因此交替行不再交替。我希望使用以下简单的方法来解决它：

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

很不幸，你不能像这样设置元素的样式属性。它会报错对象没有setter方法。我还有其他简单的方法吗？这里不能使用像jQuery这样的框架 - 这不在我的掌控之中。

更新：
虽然将所有页面都使用类而不是内联样式会是最好的解决方案，但实际上重构100多个页面并不切实际。此外，有时候还需要考虑更多因素，例如一行可能比交替行明显更暗或更亮，一种样式也可能具有不同的前景色以适应。或者交替样式可能设置边框不同。我真的不知道所有这些页面都使用了什么样式，所以我需要一些可以通用地应用一个行的所有样式到另一个行的东西。

- Joel Coehoorn

Answer 1

您可以尝试获取 cssText 和 className。

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

不过，我并不完全确定cssText在浏览器兼容性方面的表现。

- Jonathan Lonowski

---

看起来不错：根据这个页面，它应该是兼容的：http://www.quirksmode.org/dom/w3c_css.html。你会得到一个赞，也许还有一个被接受的答案，但我会等一段时间，这样问题就能在未回答的视图上停留更长时间。 - Joel Coehoorn

简单而高效。+1（我之前不知道cssText属性，这非常有用，谢谢！） - Tomalak

很方便。我也不知道cssText。 - BlackMael

Answer 2

你可以设置任何元素的style属性... 问题在于在IE中你需要使用另一种方法。（bug 245）

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

请注意，在IE8中，处于标准模式下，第一种方法是有效的。

- scunliffe

---

虽然这样做可以起作用，但会覆盖在DOM元素上设置的任何先前样式。如果需要保留旧样式，则建议使用DOMElement.style。 - traditional

Answer 3

对我而言，这个方法可行：

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}

- Tomalak

Answer 4

我想指出，通常最好更改节点的class而不是它的样式，让CSS处理其含义。

- annakata

---

不是使用类导致了-1的问题。而是因为该问题提到了许多已经有内联样式的旧页面。显然，对于新工作来说，使用类更可取。 - Joel Coehoorn

我不敢相信我因为这个得了-3分。 - annakata

Answer 5

style属性是DOM元素上定义的所有样式属性的只读集合。（集合属性是只读的，但集合中的项不一定是只读的。）

更好的做法是在元素上使用className属性。

- BlackMael

Answer 6

不要设置样式对象本身，而是设置元素属性的样式对象的背景颜色属性。

是的，即使您说不要，jquery和tablesorter与其斑马线插件也可以在3行代码中为您完成所有操作。

仅设置类属性会更好，因为这样您就可以对样式进行非硬编码控制，从而更加有组织。

- Josh

---

有时候涉及到的不仅仅是背景颜色或单个类。 - Joel Coehoorn

如果你想避免使用类，每个语句中只能设置一个属性。基本上按照我建议的扩展，然后设置你想要修改的X属性。有很多合规问题，但通常只需设置style.backgroundColor和style.foregroundColor即可。 - Josh

Answer 7

如果您只想更改行的颜色，您可以直接访问style.backgroundColor属性并设置它。 这里是一个将CSS属性转换为JS的快速链接。

- Victor