"disabled"属性

应用场景

对于 link 元素,当且仅当 link 元素被用来链接一个外部样式文件时,应用"disabled"属性定义可以切换的样式表。其功能类似于前一小节中我们提到的元素 rel 属性取值为"alternate stylesheet"时的情况。除此之外,link 元素的"disabled"属性总是返回 false,且不产生任何作用。

以下,我们给出例子说明"disabled"属性的用法。定义两个的 stylesheet,通过 button,控制其 disabled 属性的状态,切换当前应用的 stylesheet,从而实现动态更换样式。

清单 2. disabled 属性实现动态样式

function setStyle()
{
if(d.getElementById("CSS_1").disabled)
{
d.getElementById("CSS_2").disabled = true;
d.getElementById("CSS_1").disabled = false;
}
else
{
d.getElementById("CSS_1").disabled = true;
d.getElementById("CSS_2").disabled = false;
}
}

有时,我们也需要应用"disabled"属性禁用样式文件,实现样式定义对用户的隐藏。考虑如下应用场景,针对一个文本编辑器,开发人员定义了一套编辑器使用的样式文件,但他不希望该样式选择器被普通用户使用。此时,开发人员可以使用"disabled"属性禁用样式文件,通过 document.StyleSheets 得到该样式文件,读取样式定义内容,将该内容绑定到相应 HTML 标签的 Style 属性上,达到隐藏样式文件的目的。

Attribute VS. Property

为了清楚的解释元素的"disabled"属性,我们首先讨论“属性”一词的概念。从英文角度,Attribute 和 Property 都可以翻译为“属性”,但是它们的本质不同。本文仅讨论两者在 web 应用开发过程中的区别。

首先,Attribute 指的是 HTML 元素的标签所有的标记特征,是一种文本描述方式。而 Property 则是针对 DOM 树,描述 DOM 对象所具有的特性。在 W3C 标准中,对于 HTML 中 Attribute 属性,在 DOM 有一个相应的 Property 属性,如一个 div 元素的 id 和 class 既是 Attribute 也有 Property。由于 DOM 属性通常与其所对应的 HTML 属性同名,因此常常被认为这两个“属性”是等价的。

其次,对于 W3C 标准定义的 Attribute 和 Property 属性,两者总是保持一种同步关系,设置其中任意一个,都会同时影响另一个的值。而对于非 W3C 标准的自定义属性,这两个概念应该被区分。而早期版本的 IE 浏览器,如 IE6、IE7、IE8(quirks mode)中混淆了 DOM 对象的属性及 HTML 标签属性这两个概念,使得 HTML 元素的自定义属性与对应的 DOM 对象的自定义属性也会像规定中定义了绑定关系的那些标准属性一样保持着一种同步关系。这个错误的实现方式导致了一系列的兼容性问题。

最后,举例说明,通常我们可以通过".disabled"的方式访问 Property,通过".getAttribute("disabled")"的方式访问 Attribute。对于元素,W3C 的 DOM 支持"disabled"作为 Property,而其作为 Attribute,只有 IE 浏览器支持。以下我们将分别针对 Attribute 和 Property 进行浏览器兼容性讨论与分析。