当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《在javascript中设置HTML元素的样式属性》经验,为你挑选了2个好方法。

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

不幸的是,你不能像这样设置元素的样式属性.它抱怨该对象没有setter.我怎么能这么做呢?没有像jQuery这样的框架允许在这里 - 这不在我的手中.

更新:
虽然这将是最好的解决方案,但将100多个页面重构为所有使用类而不是内联样式是不切实际的.此外,有时候涉及的不仅仅是背景颜色.例如,一行可以比交替行更暗或更亮,一种样式具有不同的前景色以及容纳.或者交替的样式可以设置不同的边界.我真的不知道在所有这些页面上使用了什么,所以我需要一些通用的方法将所有样式从一行应用到另一行.



1> Jonathan Lon..:

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



2> scunliffe..:

你可以设置任何元素的style属性......诀窍是在IE中你必须以不同的方式做到这一点.(错误245)

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

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

请注意,在IE8中,在标准模式下,第一种方式可行.


虽然这会起作用,但它会覆盖在DOMElement上设置的任何先前样式.如果需要保留旧样式,建议使用`DOMElement.style`.
推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有