JavaScript FAQ（十八）—— CSS

 十五、层叠样式表（CSS）

 

1.  应用样式表（Applying Stylesheets）

Q：我如何在页面上应用另外一个样式表？

A：浏览器通过一个或者多个LINK命令（主要是在页面的HEAD区域）加载样式表（CSS文件），例如：

<LINK rel="stylesheet" type="text/css" href="styleA.css">
<LINK rel="stylesheet" type="text/css" href="styleB.css">
<LINK rel="stylesheet" type="text/css" href="styleC.css">

JavaScript通过使用集合document.styleSheets访问样式表。你可以通过将document.styleSheets[i].disabled的值设为false来应用一个样式表。将disabled设为ture就可以禁用那些你当前不需要的样式表。下面的函数应用第i个样式表，而禁用其他所有的样式表：

function applyStyle(k) {
 if (document.styleSheets) {
  var nStyles = document.styleSheets.length;
  for (var i=0;i<nStyles;i++) {
   if (i==k) document.styleSheets[i].disabled = false;
   else      document.styleSheets[i].disabled = true;
  }
 }
}

现在试一下（译者注：可以在原文上测试）：

应用样式A（蓝色文本）——调用applyStyle(0)

应用样式B（灰色文本）——调用applyStyle(1)

应用样式C（黑色文本）——调用applyStyle(2)

 

 

2. 鼠标指针样式（Mouse Cursor Styles）

Q：如何通过JavaScript改变鼠标指针样式？

A：当今多数浏览器支持一下指针样式（将鼠标移动到样式名称上以观察指针样式改变为那个样式）：

auto        move           no-drop      col-resize
all-scroll  pointer        not-allowed  row-resize
crosshair   progress       e-resize     ne-resize
default     text           n-resize     nw-resize
help        vertical-text  s-resize     se-resize   
inherit     wait           w-resize     sw-resize         

 

在Windows Internet Explorer 6.0或者更新版本，上面的指针样式如下：

 要通过脚本改变某一个元素的鼠标指针样式，你可以把元素的属性element.style.cursor设为上面的任何一个值。（另外一种不用JavaScript的方法，可以在元素的HTML标签中使用属性style="cursor:value;"）：

function setCursorByID(id,cursorStyle) {
if (document.getElementById) {
  if (document.getElementById(id).style) {
   document.getElementById(id).style.cursor=cursorStyle;
  }
}
}

在下面的演示中你可以为高亮元素（Element 1 和 Element 2）改变指针样式。在这个例子中，当你点击超链接help, wait, crosshair, text, default, move, 或者 pointer时，指针就会被在整个高亮元素上改为相应的样式，上面的例子中函数setCursorByID将会被使用到。当你点击超链接auto时，特定元素的指针就会被浏览器改为原来的样式。

 Element 1  Change cursor to any of these styles: 
help wait move crosshair text default pointer auto

 Element 2  Change cursor to any of these styles: 
help wait move crosshair text default pointer auto