首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

HTML 中 Link 元素 disable 属性详解（3）CSS 解析及 JavaScript 代码执行

论坛元老

Rank: 8Rank: 8

UID
1066743 
1#
打印
tT
look_w发表于 2018-10-19 20:21 | 只看该作者

HTML 中 Link 元素 disable 属性详解（3）CSS 解析及 JavaScript 代码执行

CSS 解析及 JavaScript 代码执行
CSS 解析是样式文件应用的前提，在样式文件加载的基础上，浏览器会对其进行解析，构建应用于当前页面的样式表集合    document.styleSheets，一个样式文件可用，首先需要存在于该集合中。因此，这里我们需要讨论在 CSS    解析过程中，"disabled"（Property）是否会影响 document.styleSheets    样式集合的内容，即验证<link>链接的样式文件是否在 document.styleSheets 中。
在清单 3 的基础上，通过 JavaScript 代码，在 HTML 文档 Body 中将 CSS_2 的"disabled"（Property）置为 true，同时将 CSS_1 的"disabled"（Property）置为 false，进行验证。测试结果如表 4 所示，其中 Before 和 After 表示的是 JavaScript 代码改变两个<link>元素"disabled"（Property）前和后。可以看出：
  • 对 IE 和 Chrome 浏览器，Property 的改变同时影响 Attribute 改变，而在 Firefox 和 Safari 中，则不会影响。
  • 对于 Chrome 和 Safari 浏览器，"disabled"（Property）的改变，会影响页面样式文件集合的内容，即浏览器会将该"disabled"为 true 的链接样式文件从集合中移除。同时加载并添加"disabled"为由 true 变为 false 的样式文件。
表 4. Property 变化测试结果conditionsIE(10)FirefoxChromeSafariStyleSheets.lengthBefore2212After2211StyleSheets.contentBeforeCSS_1
CSS_2CSS_1
CSS_2CSS_2CSS_1
CSS_2AfterCSS_1
CSS_2CSS_1
CSS_2CSS_1CSS_1Disabled(Attribute)
Before/AfterCSS_1true/nulltrue/truetrue/nulltrue/trueCSS_2null/空值null/nullnull/空值null/nullDisabled(Property)
Before/AfterCSS_1true/falsefalse/falsetrue/falsefalse/falseCSS_2false/truefalse/truefalse/truefalse/true页面绘制
页面绘制即将 DOM 树与 CSS 属性，如字体、背景色、圆角等结合起来，按照给定的方式呈现在浏览器窗口中。验证"disabled"属性被各浏览器支持的情况，最终是验证"disabled"作为 property 属性时，是否影响链接样式表文件的可用性。即判定设置 disabled 后，该样式是否应用。
清单 4. 测试页面
1
2
3
4
5
6
7
8
9
10
<html>
<body>
<div id="testDiv1" class="css1" style="width:200px; height:200px;
background-color:green">div1
</div>
<div id="testDiv2" class="css2" style="width:200px; height:200px;
background-color:green;position:absolute;top:100px;left:100px">div2
</div>
</body>
</html>




清单 5. Style_1.css
1
2
3
4
5
.css1{
border-style:solid;
border-colorrange;
border-width:10px;
}




清单 6. Style_2.css
1
2
3
4
5
.css2{
border-style:solid;
border-color:bule;
border-width:10px;
}




如清单 4 代码所示，在清单 3 的基础上定义测试页面，应用 CSS_1 和 CSS_2 样式，验证不同浏览器中的表现。
图 1. IE图 2. Firefox图 3. Chrome图 4. Safari测试结果如图 1、2、3、4 及表 5 所示，其中 Y 表示该样式文件被应用，N 表示未被应用，可以看出：
  • IE 和 Chrome 浏览器应用了样式文件 CSS_2，而 Firefox 和 Safari 则同时应用了两个样式文件。
  • 对于是否应用<link> 元素链接的样式表，浏览器根据其"disabled"（Property）决定的。而 Property 的取值，在 Firefox 和 Safari 中，初始值为浏览器默认 false 值；在 IE 和 Chrome 中，初始值由 Attribute 值决定，若 Attribute 为 true，不加载该链接样式文件。
表 5. Apply 测试结果conditionsIE(10)FirefoxChromeSafariCSS_1NYNYCSS_2YYYY
收藏 分享 评分
回复 引用

订阅 TOP

返回列表