Powerful CSS expression -- Expression

Ie5 and later versions support the use of expressions in CSS to associate CSS attributes with javas alias expressions. the CSS attributes here can be inherent attributes of elements or custom attributes. That is to say, the CSS attribute can be followed by a javas alias expression. The value of the CSS attribute is equal to the result calculated by the javas alias expression. You can directly reference attributes and methods of an element in an expression, or use other browser objects. This expression is like a member function in this element.

Assign values to inherent attributes of an element

For example, you can place an element based on the browser size.

 

The following is a reference clip: # Mydiv { Position: absolute; Width: 100px; Height: 100px; Left: expression (document. Body. offsetwidth-110 + "PX "); Top: expression (document. Body. offsetheight-110 + "PX "); Background: red; }

Assign values to custom attributes of Elements

For example, remove the link dashed box on the page. The common practice is:

 

The following is a reference clip: <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>

Although the advantage of using expression may not be apparent, if your page contains dozens or even hundreds of links, will you still perform mechanical Ctrl + C, CTRL + v. What's more, which of the two produces more redundant code?

Use expression as follows:

 

The following is a reference clip: <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>

Note: Star is an attribute defined by yourself. You can define it as you like, and the statements contained in expression () are JS scripts, do not forget to keep a quotation mark between the custom attribute and expression. Because it is still CSS in essence, it is placed in the style label rather than the s limit. OK, so that it is easy to use one sentence to eliminate the link dashed line boxes in the page. But don't be proud of it. If the special effect triggered is a CSS attribute change, the output will be different from your intention. For example, if you want to change the color of the text box on the page as the mouse moves in and out, you may assume that

 

The following is a reference clip: <Style type = "text/CSS"> Input {Star: expression (onmouseover = This. style. backgroundcolor = "# ff0000 "; Onmouseout = This. style. backgroundcolor = "# ffffff ")} </Style> <Style type = "text/CSS"> Input {Star: expression (onmouseover = This. style. backgroundcolor = "# ff0000 "; Onmouseout = This. style. backgroundcolor = "# ffffff ")} </Style> <Input type = "text"> <Input type = "text"> <Input type = "text">

The result is a script error. The correct syntax should write the CSS style definition into the function, as shown below:

 

The following is a reference clip: <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">

Note:

It is not very necessary. We do not recommend using expression because expression has high requirements on browser resources.

Example: use expression in CSS to implement batch control of interface objects

Problem description: After using CSS styles, we know that we can define the class attributes of a batch of objects to specify the same style to unify the interface. But how can we unify the events of the same type of objects? For example, there are several How do I move the mouse over this image and convert the image SRC to ** _over.jpg?

Solution: Use the CSS expression method,
To learn more about CSS:

The following is a reference clip: /* Replace the image CSS */ # Imgscript {/* use the Object ID to configure styles. You can also define a CSS function */ Star: expression ( Onmouseover = function () { /* Replace the image */ If (this. Hover! = NULL ){ This. Name = This. SRC; This. src = this.src.replace('.jpg ', '_over.jpg '); This. haschg = 1; } }, Onmouseout = function () { /* Restore the original image */ If (this. haschg! = NULL ){ This. src = This. Name; This. haschg = NULL; } } ) }/* End imgscript */