javascript - 在 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;                 
}

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

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

score 41 · Accepted Answer

您可以尝试抓住cssTextand 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.

score 23 · Accepted Answer

您可以设置任何元素的样式属性...诀窍是在 IE 中您必须以不同的方式进行操作。（错误 245）

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

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

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

score 4 · Accepted Answer

对我来说，这有效：

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 */ }
}

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

并且仅设置类属性会更好，因为那时您可以对更有条理的样式进行非硬编码控制

score 0 · Accepted Answer

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

这是一个 CSS 属性到 JS 转换的快速链接。

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

7 回答 7

Related

Reference