使用JavaScript枚举CSS样式元素

首先，JavaScript绝对不是我的母语。不过，我的任务是创建一个网页，用户可以使用颜色选择器来更改CSS元素。然后这些需要被发送回服务器以存储在数据库中。除了最后一部分，这一切都工作得很好，因为我被困在阅读所需的元素。使用JavaScript枚举CSS样式元素

使用下面的代码对于任何单个单词元素（如color）都可以正常工作，但对于任何带连字符的单词元素（例如background-color）都会失败，这会返回undefined。为了保持一致性，我已经对其他许多元素进行了测试。

任何想法为什么这会失败，最好有修复它的建议？或者，您是否有一个可以用于此目的的代码片段？的CSS样式表的

function Save(form) { 
var cssRules; 
var Q = ""; 

for (var S = 0; S < document.styleSheets.length; S++){ 
    if (document.styleSheets[S]['rules']) { 
     cssRules = 'rules'; 
    } else if (document.styleSheets[S]['cssRules']) { 
     cssRules = 'cssRules'; 
    } 

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) { 
     if (document.styleSheets[S][cssRules][R].selectorText == '.event') { 
      Q += "+bc=" + document.styleSheets[S][cssRules][R].style['color'] + "+bb=" + document.styleSheets[S][cssRules][R].style['background-color']; 
     } 
     // Similar code for other elements goes here 
    } 
} 

form.css.value = Q; 
form.submit(); 
}

实施例部分：

.event { 
    text-align: center; 
    font-size: 10px; 
    font-weight: bold; 
    text-decoration: line-through; 
    color: red; 
    background-color: #ffff99; 
    height:20px; 
    width:20px; 
}

这是一种HTML元素的我所需要的样式表值：

<td class="event">11</td>

来源

2010-07-01 John Gardeniers

这是因为在Javascript中与其他语言一样，连字符不是有效的符号字符。当您使用字符串作为索引，像

style["background-color"]

是一样的做

style.background-color

这是无效的，访问您需要删除连字符和大写的下一个字符带有分隔符的CSS属性，如

style.backgroundColor; // or style["backgroundColor"];

来源

2010-07-01 03:23:13

虽然这与Jason的回答基本相同，但我会接受你的，因为有额外的细节，这对我很有帮助。谢谢。 – 2010-07-01 03:29:52

稍有误导：连字符是**标识符**中的无效字符。它在属性名称中不是无效的，正如你可以通过做'var o = {“％1-2 * -3”：“test”};警报（O [ “％1-2 * -3”]）;'。然而，你可能是正确的，因为CSS属性名称在JavaScript中是不同的，所以它们可以用作标识符，因此点符号可以用来访问样式属性。 – 2010-07-01 08:42:11

啊，Anurag也提出了相同的观点。 – 2010-07-01 08:43:15

在JavaScript中设置CSS属性你需要使用camelCase来获取hyphened属性。例如：

/* CSS */ 
background-color: red; 

/* JS */ 
element.style.backgroundColor = 'red';

来源

2010-07-01 03:13:59

要添加到@ Francisco的答案，在JavaScript中的对象属性可以包含任何字符串。但是，如果它包含变量命名非法的字符，则不能使用.运算符访问它，并且必须使用[]访问它。使用这样的角色将是一个极端的example：

var o = { "◀▶": "hello!" }; 
o["◀▶"]; // hello!

但是，我们不能写o.◀▶，因为这将提高一个SyntaxError因为这些 Unicode字符不是有效的标识符的名称。但是请注意，unicode字符可用于标识符名称，并且按照ECMAScript第5版的规定是有效的。但仅限于某些类别的Unicode类别。所以，一个人能write：对于第3版的文档中

var o = {}; 
o.Π = "hello world"; 
o.Π; // "hello world"

见部分7.6 Identifier Names and Identifiers。或第五版。有关有效标识符名称的更多信息。

DOM元素的style属性是CSSStyleDeclaration的对象，可以通过几种方式进行操作。作为宿主对象，一些浏览器可以提供比其他更多的功能。在Webkit浏览器（Chrome和Safari）上，您可以使用[]表示法使用CSS2名称设置样式属性。

document.body.style['background-color'] = "#CCC";

为CSSStyleDeclaration接口包含一个setProperty方法也可用于设置这些属性：

interface CSSStyleDeclaration { 
    ... 
    void setProperty(in DOMString propertyName, 
        in DOMString value, 
        in DOMString priority) 
      raises(DOMException); 
    ... 
}

使用setProperty，我们可以这样写：

document.body.style.setProperty("background-color", "orange", null);

我们可以使用getPropertyValue使用它的CSS2名称获取当前值：

document.body.style.getPropertyValue("background-color");

最后，正如其他答案所述，您始终可以使用CSS2Properties界面来方便地访问样式对象的CSS属性。它们相当于在具有相应属性名称的样式对象上调用setProperty和getPropertyValue。从spec（包含姓名为应该由该接口被暴露的所有属性）：

的CSS2Properties接口表示用于检索和的CSSStyleDeclaration内定型特性的便利机制。该接口的属性对应于CSS2中指定的所有属性。获取此接口的属性等效于调用CSSStyleDeclaration接口的getPropertyValue方法。设置此接口的属性等同于调用CSSStyleDeclaration接口的setProperty方法。

在支持此接口（它不是必需的），我们可以查询/更新的样式对象，如任何浏览器：

document.body.style.backgroundColor = "black";

或

document.body.style["backgroundColor"] = "black";

所有的见examples以上。

来源

2010-07-01 05:02:02 Anurag

感谢您的出色信息。 – 2010-07-01 06:11:37

确实，谢谢你的回答。也许我应该坚持C和Perl。至少那些对我有意义。 :) – 2010-07-02 12:49:43

@Francisco - 不客气，我在标识符名称中发现了自己的unicode字符，所以这是一个很好的学习体验:) @John - 谢天谢地，这些语言不会受到1级的影响。每隔一周：） – Anurag 2010-07-02 18:23:10

使用JavaScript枚举CSS样式元素

回答

相关问题