Cascading Style Sheets Tutorial

  IE5 and later in the CSS support in the use of expression, used to CSS properties and Javas cript expression correlation, here is the CSS properties can elements inherent attributes, and can also be custom attributes.    CSS can attribute that is behind is a Javas cript expression, CSS equivalent to the value of the attribute Javas cript expression of the result of the calculation.    In the expression of their elements can be directly invoked the attributes and methods can also use other browser object.    This expression is like a member of the element of the same function. 

  Inherent attributes assigned to the elements 

  For example, you can follow the browser to accommodate the size of the location of an element. 

  The following is quoted fragment: 
  (# MyDiv 
  Position: absolute; 
  Width: 100px; 
  Height: 100px; 
  Left: expression (document.body.offsetWidth - 110 + "px"); 
  Top: expression (document.body.offsetHeight - 110 + "px"); 
  Background: red; 
  ) 

  Elements custom attributes to the assignment 

  For example, the elimination of Xuxiankuang links on the page.    It is a normal practice: 

  The following is quoted fragment: 
  <a Href="link1.htm" onfocus="this.blur()"> link1 </ a> 
  <a Href="link2.htm" onfocus="this.blur()"> link2 </ a> 
  <a Href="link3.htm" onfocus="this.blur()"> link3 </ a> 

  Rough may also see no use of the advantages of expression, but if you have dozens of pages or even hundreds of links, then you will Is mechanical and Ctrl + C, Ctrl + V Mody, not to mention both a comparison, which have more redundant code? 

  Adopted the practice of expression as follows: 

  The following is quoted fragment: 
  <style Type="text/css"> 
  A (star: expression (onfocus = this.blur)) 
  </ Style> 
  <a Href="link1.htm"> link1 </ a> 
  <a Href="link2.htm"> link2 </ a> 
  <a Href="link3.htm"> link3 </ a> 

  Description: The star is inside their own arbitrary definition of attributes, you can taste the other with their own definition, and then included in the expression (), the statement is JS script, in the custom attributes between expression and do not forget there is a quote, because real or CSS, so labels on the style, not the s cript.    OK, so it is easy to use a word achieved in the pages of links Xuxiankuang elimination.    But first you not complacent, if the effect is triggered CSS attribute changes, then the results will be with you the original intent of a difference.    For example, if you want to with the mouse moved out of the change in the text box page color changes, you might think that should be granted to write 

  The following is quoted fragment: 
  <style Type="text/css"> 
  Input 
  (Star: expression (= this.style.backgroundColor onmouseover = "# FF0000"; 
  Onmouseout = this.style.backgroundColor = "# FFFFFF")) 
  </ Style> 
  <style Type="text/css"> 
  Input (star: expression (= this.style.backgroundColor onmouseover = "# FF0000"; 
  Onmouseout = this.style.backgroundColor = "# FFFFFF")) 
  </ Style> 
  <input Type="text"> 
  <input Type="text"> 
  <input Type="text"> 

  Can be the result was a script error, the correct wording should be included in the definition of CSS style function, as follows: 

  The following is quoted fragment: 
  <style Type="text/css"> 
  Input (star: expression (onmouseover = function () 
  This.style.backgroundColor = ( "# FF0000"), 
  Onmouseout = function () (this.style.backgroundColor = "# FFFFFF"))) 
  </ Style> 
  <input Type="text"> 
  <input Type="text"> 
  <input Type="text"> 

  Attention 

  Not very necessary, generally do not recommend the use of expression, the expression because of the browser relatively high resource requirements. 

  Example: use css to achieve expression in the target volume control interface 

  Statement: CSS style we used to know, a number of objects can be defined to specify the class attribute to the same style uniform interface. How unified with the type of object the incident? For example: there are numerous interface <img src = "* *. jpg ">" How to achieve this through a mouse picture, a picture is the src _ over.jpg **? 


  Solution: use of the expression css, 
  To look at the concrete realization. Css wording: 

  The following is quoted fragment: 
  / * Replacement picture CSS * / 
  # ImgScript (/ * Object ID to use here-with style, css can also define a function * / 
  Star: expression ( 
  Onmouseover = function () 
  ( 
  / * Replacement picture * / 
  If (this.hover! = Null) ( 
  This.name = this.src; 
  This.src = this.src.replace ( '. Jpg', '_over.jpg'); 
  This.HasChg = 1; 
  ) 
  ) 
  Onmouseout = function () 
  ( 
  / * Restore the original picture * / 
  If (this.HasChg! = Null) ( 
  This.src this.name =; 
  This.HasChg = null; 
  ) 
  ) 
)
  ) / * End imgScript * / 

Tags: css effects firefox, css expression, div effects

Releated Posts

• Web effects: CSS + JS Construction of the picture viewer
• Let css website effects of translucent picture of web pages
• Expression of the CSS custom attributes to achieve forms OnMouseOver effects
• More than 30 CSS navigation menu effects
• CSS production standard navigation menu effects

This entry was posted on Sunday, February 10th, 2008 at 12:00 am and is filed under Css+Div Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.