Question

我创建了一个简单的html页面，其中有一个按钮可以在单击时更改其颜色：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onclick="if (this.style.backgroundColor == 'Red') {
        this.style.backgroundColor = 'Green'
    }
    else {
        this.style.backgroundColor = 'Red'
    }
     alert(this.style.backgroundColor)">
    ok
</button>
</body>
</html>

令我惊讶的是alert(this.style.backgroundColor)返回红色而不是红色。 为什么？分配this.style.backgroundColor = 'Red'并在此红色中以大写字母开头。

Answer 1

CSS样式不会保存为文字字符串，而是转换为样式的内部规范表示。颜色样式不区分大小写，规范表示形式为小写。

Answer 2

某些CSS属性不区分大小写。

允许浏览器将其标准化。

Answer 3

根据W3C，颜色单位（颜色名称）不区分大小写。

4.1。基本颜色关键字

基本颜色关键字列表为：浅绿色，黑色，蓝色，紫红色，灰色，绿色，石灰色，栗色，海军蓝色，橄榄色，紫色，红色，银色，蓝绿色，白色和黄色。颜色名称 不区分大小写 。

http://www.w3.org/TR/css3-color/#colorunits

Answer 4

这不只是将字符串赋值给变量，而是将字符串赋值给对象的属性。

对象的属性可以有自定义的setter / getter行为。

this.style是一个CSSStyleDeclaration对象，它具有backgroundColor setter / getter实现和本机代码。

一个例子是：

var o = {a: '',  get foo() {return this.a.toLowerCase();}, set foo(x) {this.a = x;}};
o.foo = 'Red';
console.log(o.foo); // will be 'red'

为什么javaScript中的字符串赋值不区分大小写？

4 个答案: