JavaScript FAQ (18)--css__java

15, cascading style sheet (CSS)

1. Apply style sheet (applying stylesheets)

Q: How do I apply a different style sheet on the page?

A: The browser loads the style sheet (CSS file) through one or more link commands (mainly in the head area of the page), for example:

<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 accesses a style sheet by using a collection document.stylesheets. You can apply a style sheet by setting the value of document.stylesheets[i].disabled to false. By setting disabled to ture, you can disable the style sheets that you don't currently need. The following function applies the first style sheet and disables all other style sheets:

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;}}

Now try it (translator: You can test it in the original text):

Apply Style A (blue text)--call ApplyStyle (0)

Apply Style B (gray text)--Call ApplyStyle (1)

Apply Style C (black text)--Call ApplyStyle (2)

2. Mouse pointer style (Mouse Cursor Styles)

Q: How to change the mouse pointer style through JavaScript.

A: Most browsers today support the pointer style (move the mouse over the style name to observe the pointer style change to that style):

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         

In Windows Internet Explorer 6.0 or later, the pointer style above is as follows:

To change the mouse pointer style of an element by scripting, you can set the attribute element.style.cursor of an element to any of the above values. (Another way to do without JavaScript is to use attributes style= "Cursor:value" in the HTML tag of an element). ）：

function Setcursorbyid (id,cursorstyle) {
if (document.getElementById) {
  if (document.getElementById (ID). Style) {
   document.getElementById (id). Style.cursor=cursorstyle
  }}
}

In the following demo you can change the pointer style for the highlighted elements (element 1 and Element 2). In this example, when you click Hyperlink Help, Wait, crosshair, text, default, move, or pointer, the pointer is changed to the corresponding style on the entire highlighted element, In the example above, the function Setcursorbyid will be used. When you click on the hyperlink auto, the pointer to a particular element is changed to the original style by the browser.

Element 1 Change cursor to any of the  following styles: Help wait move 
crosshair text default pointer auto

 Element 2
  change cursor to any of the styles: Help wait move 
crosshair text default pointer auto