JavaScript FAQ(十八)—— CSS-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JavaScript FAQ(十八)—— CSS

简介:  十五、层叠样式表(CSS)   1.  应用样式表(Applying Stylesheets) Q:我如何在页面上应用另外一个样式表? A:浏览器通过一个或者多个LINK命令(主要是在页面的HEAD区域)加载样式表(CSS文件),例如: JavaScript通过使用集合document.styleSheets访问样式表。

 十五、层叠样式表(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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章