在javascript中设置HTML元素的样式属性 [英] Set HTML element's style property in javascript
问题描述
我有一堆老式的经典ASP页面，其中许多页面在表格中显示数据库数据。没有任何页面具有任何内置的排序功能：您可以使用原始开发人员认为适合使用的任何ORDER BY子句。
我正在研究快速修复通过客户端JavaScript排序。我已经写了一个脚本，主要是做我需要的。不过，我仍然需要添加一点功能。这些页面中的表格行通常会有交替的行颜色，并且用于实现此目的的机制因页面而异。这可能与更改CSS类一样简单，或者ASP代码可能已经内联呈现样式。
在对表格排序后，每行保持着色方案被渲染，所以交替的行不再交替。我希望用这样简单的方法解决它：
/ *table是表元素I'米排序。
我已经验证它存在，并且至少有三行。
此时第一行（索引0）始终是标题行。
* /
//检查交替行的样式：
var RowStyle = table.rows [1] .style;
var AltStyle = table.rows [2] .style;
//在此发布！
// snip
//应用交替行样式
if（RowStyle === AltStyle）return true; （i = 1，il = table.rows.length; i< i; i + = 1）
if（i％2 == 0）table.rows [i ] .style = RowStyle;
else table.rows [i] .style = AltStyle;
}
不幸的是，你不能像这样设置元素的样式属性。它抱怨该对象没有setter。我还能怎么做呢？没有像jQuery这样的框架允许在这里 - 这是没有我的手。
更新：
虽然这将是最好的解决方案，将100多个页面重构为所有使用类而不是内联样式是不实际的。此外，有时还有更多的参与，而不仅仅是背景颜色。例如，一行可能比交替行更暗或更亮，一种样式具有不同的前景色以适应。或者交替的风格可能会设置不同的边界我真的不知道在所有这些页面上使用了什么，所以我需要一些将所有样式从一行应用到另一行的东西。
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;
//分类
//循环
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兼容，但是。
I have a bunch of old classic ASP pages, many of which show database data in tables. None of the pages have any sorting functionality built in: you are at the mercy of whatever ORDER BY clause the original developer saw fit to use.
I'm working on a quick fix to tack on sorting via client-side javascript. I have a script already written that mostly does what I need. However, I still need to add one bit of functionality. The table rows in these pages will often have alternating row colors, and the mechanism used to achieve this varies among the pages. It might be as simple as changing a CSS class or the styles may have been rendered inline by the ASP code.
Right now after sorting the table each row keeps the coloring scheme is was rendered with and so the alternating rows no longer alternate. I was hoping to fix it with something simple like this:
/* "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;
}
Unfortunately, you can't just set to an element's style property like this. It complains that the object has no setter. How else can I do this simply? No frameworks like jQuery allowed here- that's out of my hands.
Update:
While it would be the best solution, it's just not practical to refactor 100+ pages to all use classes rather than inline style. Also, sometimes there's more involved than just the background color. For example, a row may be much darker or lighter than the alternating row, with one style having a different foreground color as well to accommodate. Or an alternating style may set borders differently. I really don't know what is used on all of these pages, so I need something that will generically apply all styles from one row to another.
You can try grabbing the cssText and 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;
}
Not entirely sure about browser compatibility with cssText, though.
这篇关于在javascript中设置HTML元素的样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
