Question

在为浏览器开发一些JavaScript代码时，我在Chrome中遇到了一些奇怪的错误：

var element = document.getElementById('someId');
element.style.customProp = 'my property';

element.addEventListener('click', function() {
    console.log(element.style.customProp);
}, false);

点击控制台打印'undefined'，但是当我将代码更改为：

时

var element = document.getElementById('someId');
element.style.customProp = 'my property';
var a = element.style;

element.addEventListener('click', function() {
    console.log(element.style.customProp);
}, false);

控制台打印'我的属性'。

第一版代码在Firefox和Internet Explorer中按预期工作。它不适用于Chrome和Opera。对我来说这显然是一个错误，但也许我错过了一些东西。这真的是一个错误或我错过了什么？

Answer 1

似乎像WebKit Bug

请参阅Fiddle 1（作品）与Fiddle 2（不）

某些属性似乎会阻止Chrome中的自定义样式属性。此测试显示border-radius，但其他可能。

我是否使用过似乎并不重要：

var element = document.getElementById('someId');
element.style.customProp = 'my property';

element.addEventListener('click', function() {
    console.log(element.style.customProp);
}, false);

或：

var element = document.getElementById('someId');
element.style.customProp = 'my property';
var a = element.style;

element.addEventListener('click', function() {
    console.log(element.style.customProp);
}, false);

对于我的价值，我在Chrome 31上看到了错误。不确定其他版本可能会受到影响。

提交报告here

Answer 2

element.style是CSSStyleDeclaration的一个实例，这意味着它是主机对象，而不是本机javascript对象。

ECMAScript规范声明主机对象不受与本机对象相同的规则的约束，因此我不希望将其定义为“错误”（即使我永远无法复制它）。

Chrome和Opera中的Javascript错误

2 个答案: