javascript - js设置style - js style display



在javascript中设置HTML元素的样式属性 (5)

不要设置样式对象本身,请设置作为元素属性的样式对象的背景颜色属性。

是的,即使你说不,jquery和tablesorter与斑马条纹插件可以在三行代码中完成这一切。

而只是设置类属性会更好,因为那样你就可以对更有组织的样式进行非硬编码的控制

https://src-bin.com

我有一堆旧的经典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多个页面并不是所有使用类而不是内联风格都是不实际的。 另外,有时还有更多的参与,而不仅仅是背景颜色。 例如,一行可能比交替行更暗或更亮,一个样式具有不同的前景色以适应。 或者交替的风格可能会设置不同的边界。 我真的不知道所有这些页面上使用了什么,所以我需要一些将一般适用于所有样式从一行到另一个。


Answer #1

你可以尝试抓取cssTextclassName

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兼容性。


Answer #2

对我来说,这个工作:

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

Answer #3

我想要指出的是,通常最好是改变节点的而不是它的样式,让CSS处理这个意思。


Answer #4

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

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





styles