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或者更新版本,上面的指针样式如下:


JavaScript FAQ(十八)—— CSS_第1张图片

 要通过脚本改变某一个元素的鼠标指针样式,你可以把元素的属性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

你可能感兴趣的:(JavaScript FAQ(十八)—— CSS)