HTML 中 Link 元素 disable 属性详解（2）"disabled"属性

look_w

"disabled"属性应用场景对于 link 元素，当且仅当 link 元素被用来链接一个外部样式文件时，应用"disabled"属性定义可以切换的样式表。其功能类似于前一小节中我们提到的<link>元素 rel 属性取值为"alternate stylesheet"时的情况。除此之外，link 元素的"disabled"属性总是返回 false，且不产生任何作用。
以下，我们给出例子说明"disabled"属性的用法。定义两个<link>的 stylesheet，通过 button，控制其 disabled 属性的状态，切换当前应用的 stylesheet，从而实现动态更换样式。
清单 2. disabled 属性实现动态样式

1 2 3 4 5 6 7 8 9 10 11 12 13

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为了清楚的解释<link>元素的"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。对于<link>元素，W3C 的 DOM 支持"disabled"作为 Property，而其作为 Attribute，只有 IE 浏览器支持。以下我们将分别针对 Attribute 和 Property 进行浏览器兼容性讨论与分析。
浏览器支持分析以页面渲染过程为中心，我们进行实验测试，从两个方面（Attribute 和 Property），三个阶段来（HTML 解析、CSS 解析及 JavaScript    代码执行，页面绘制）分析 IE、Firefox、Chrome 和 Safari 四种浏览器对<link>元素"disabled"的支持情况。为了描述和讨论，我们首先明确如下概念：

• 是否加载：判断<link>链接的样式文件是否被浏览器请求加载，是否存在于浏览器加载的资源列表中。
• 是否在 document.styleSheets 中：判断<link>链接的样式文件是否在应用于当前文档的样式表集合中，即通过 document.styleSheets[index]来判定样式文件的存在。
• 是否应用：判断<link>链接的样式文件是否能被应用于当前页面元素上。即当定义 class="selector"时，样式是否生效。

HTML 解析
解析文档指的是将其翻译成有意义的结构供代码使用，HTML 解释是浏览器翻译当前页面的第一步，它完成从 HTML 标签到 DOM 树生成的过程。通常，HTML 解析包含两个步骤，标签解析和 DOM 树生成。
因此，分析浏览器对<link>元素"disabled"属性支持情况，首先需要讨论在 HTML 标签解析过程中，其"disabled"（Attribute）是否被解析器正确识别和处理，也就是"disabled"的取值是否影响浏览器对于<link>链接样式文件的加载，即验证是否加载；其次，讨论在 DOM 树生成过程中，"disabled"（Porperty）是否被正确赋值，也就是验证 Attribute 和 Property 是否表现一致，"disabled"的值否由 Attribute 正确传递给 Property。
清单 3. HTML 解析示例代码

1 2	<link id="CSS_1" rel="stylesheet" type="text/css" href="Style_1.css" disabled=" true" /> <link id="CSS_2" rel="stylesheet" type="text/css" href="Style_2.css" />

如上代码所示，我们定义两个<link>元素，分别链接不同的样式文件进行测试，其中，CSS_2 的"disabled"不做设置。测试结果如表 3 所示，其中 Y 表示加载，N 表示未加载，可以看出：

• 当"disabled"（Attribute）为 true 时，Chrome 表现出和其他浏览器不同的属性，并不加载该文件。
• 同时，无论"disabled"（Attribute）取值为 true 或 false，Firefox 和 Safari 都将"disabled"（Property）的值置为 false。

表 3. HTML 解析测试结果conditionsIE(10)FirefoxChromeSafariloadCSS_1YYNYCSS_2YYYYDisabled
(Attribute)CSS_1truetruetruetrueCSS_2nullnullnullnullDisabled
(Property)CSS_1truefalsetruefalseCSS_2falsefalsefalsefalse