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
目录
相关文章
|
10天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
21 6
|
10天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
21 4
|
10天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
2天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
4 1
|
3天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
13 1
|
8天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
10天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
17 0
|
10天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
15 1
|
10天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
10天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
32 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)