Javascript:获取具有不正确样式定义的元素的内容

时间:2014-04-03 15:17:17

标签: javascript css

我正在为某个网站创建一个样式表,使用javascript将类分配给某些元素。无论出于何种原因,某些'td'元素使用奇怪的类赋值和内联样式,因此我将它们循环遍历,清理它们并指定适当的类名以在外部样式表中引用。

我无法访问网站本身(也没有管理权限可以更改任何内容)所以我使用Stylish和Greasemonkey for Firefox(加上Adblock来处理原始样式表)。

以下是js代码的一小部分,负责:

var cellStyleBg = cCell.style.backgroundColor;
if (cellStyleBg) {
switch(cellStyleBg) {
    case 'white':
        cCell.removeAttribute('style');
         if ( cCell.parentNode.nodeName == 'TR' ) {
             cCell.parentNode.className = 'deadlineSet';
         }
         break;
...

问题是有一个特殊情况,这不起作用:

<td class="td2h" style="background: dd97f0;">

如您所见,颜色代码前面没有octotorp。我认为这就是在这种情况下变量cellStyleBg为'null'的原因。

我尝试(而不是'cCell.style.backgroundColor')使用'cCell.style'和'cCell.style.background',但它们不会返回纯文本供我解析。

我可以做些什么来处理这种特殊情况?

1 个答案:

答案 0 :(得分:1)

我认为唯一的方法是获取style属性的原始值。 你可以通过

来做到这一点
//will output background: dd97f0
cCell.getAttribute('style');

如果需要,您可以使用此代码段

将样式细分为键值对
//give "background: dd97f0", will output "background=dd97f0"
var stylePattern = /(.*?):([^;]*);?/g
while (match = stylePattern.exec(style)) {
    console.log(match[1].trim() + "=" + match[2].trim());
}