使用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>
这是因为在Javascript中与其他语言一样,连字符不是有效的符号字符。当您使用字符串作为索引,像
style["background-color"]
是一样的做
style.background-color
这是无效的,访问您需要删除连字符和大写的下一个字符带有分隔符的CSS属性,如
style.backgroundColor; // or style["backgroundColor"];
在JavaScript中设置CSS属性你需要使用camelCase来获取hyphened属性。例如:
/* CSS */
background-color: red;
/* JS */
element.style.backgroundColor = 'red';
要添加到@ 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 06:11:37
确实,谢谢你的回答。也许我应该坚持C和Perl。至少那些对我有意义。 :) – 2010-07-02 12:49:43
@Francisco - 不客气,我在标识符名称中发现了自己的unicode字符,所以这是一个很好的学习体验:) @John - 谢天谢地,这些语言不会受到1级的影响。每隔一周 :) – Anurag 2010-07-02 18:23:10
虽然这与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