36-解决方案3_在页面中包含所有与尺寸相关的样式表，但一次只启用一个

6.9.5　解决方案3：在页面中包含所有与尺寸相关的样式表，但一次只启用一个

<link rel="stylesheet" type="text/css" class="css_size small" href="size-small.css" />
<link rel="alternate stylesheet" type="text/css" class="css_size large"
　　 href="size-large.css" disabled=true/>

在这种情况下，定义如下 setSize 函数：

var setSize = function(size) {
　　 jQuery('link.css_size').each(function() {
　　　　　var $this = $(this);
　　　　　if ($this.hasClass(size)) {
　　　　　　　 $this
　　　　　　　　　　.removeAttr('disabled')
　　　　　　　　　　.attr('rel', 'stylesheet');
　　　　　} else {
　　　　　　　 $this
　　　　　　　　　　.attr('disabled', true)
　　　　　　　　　　.attr('rel', 'alternate stylesheet');
　　　　　}
　　 });
};

在这种方法中，所有样式表都在页面加载时载入，切换不同样式表时不读取任何新的内容，这减少了解决方案2导致的延迟，但是如果用户不需要备选的样式表，这种方案也可能造成不必要的HTTP请求。