在 javascript 中设置 HTML 元素的样式属性答案

【问题标题】：Set HTML element's style property in javascript在 javascript 中设置 HTML 元素的样式属性
【发布时间】：2010-09-25 13:00:34
【问题描述】：

我有一堆旧的经典 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;                 
}

不幸的是，您不能像这样设置元素的样式属性。它抱怨该对象没有设置器。我还能如何简单地做到这一点？这里不允许使用像 jQuery 这样的框架——这不在我的掌控之中。

更新：
虽然这将是最好的解决方案，但将 100 多个页面重构为全部使用类而不是内联样式是不切实际的。此外，有时涉及的不仅仅是背景颜色。例如，一行可能比交替行更暗或更亮，其中一种样式也具有不同的前景色以适应。或者交替的样式可能会以不同的方式设置边框。我真的不知道在所有这些页面上使用了什么，所以我需要一些能够将 all 样式从一行通用应用到另一行的东西。

【问题讨论】：

标签： javascript html styles

【解决方案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 的兼容性。

【讨论】：

看起来不错：根据这个页面，它应该是兼容的：quirksmode.org/dom/w3c_css.html 你会得到一个赞成票，也许是一个被接受的答案，但我要等一会儿，以便问题在未回答视图上停留的时间更长。
简单高效。 +1（我不知道 cssText 属性，这非常有用，谢谢！）
这很方便。我也知道 cssText。

【解决方案2】：

您可以设置任何元素的样式属性...诀窍是在 IE 中您必须以不同的方式进行设置。 (bug 245)

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

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

请注意，在 IE8 中，在标准模式下，第一种方法确实有效。

【讨论】：

虽然这会起作用，但它会覆盖之前在 DOMElement 上设置的任何样式。如果需要保留旧样式，建议使用DOMElement.style。

【解决方案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 */ }
}

【讨论】：

【解决方案4】：

我想指出，通常最好更改节点的 class 而不是其样式，并让 CSS 处理这意味着什么。

【讨论】：

它没有使用获得 -1 的类。就是这个问题提到了很多已经有内联样式的旧页面。显然，对于新工作来说，上课是更可取的。
不敢相信我得到了-3

【解决方案5】：

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

最好在元素上使用 className“属性”。

【讨论】：

【解决方案6】：

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

是的，即使你说不，jquery 和 tablesorter 及其斑马条纹插件也可以在 3 行代码中为你完成这一切。

只设置类属性会更好，因为这样你就可以对更有条理的样式进行非硬编码控制

【讨论】：

有时涉及的不仅仅是背景颜色或单个类。
如果您要避免上课，则只能在单个语句中设置一个属性。基本上扩展我的建议并设置您要修改的 X 属性。有很多合规问题，但一般只设置 style.backgroundColor 和 style.foregroundColor

【解决方案7】：

如果你只是想改变行的颜色，你可以访问 style.backgroundColor 属性并设置它。

Here 是 CSS 属性到 JS 转换的快速链接。

【讨论】：