Effect of Css using js expression _ experience exchange

Css uses js expressions to implement the effect IE5 and later versions. It supports using expressions in CSS to associate CSS attributes with Javas alias expressions, the CSS attribute can be an inherent attribute of an element or a custom attribute. 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.

# 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:

Link1
Link2
Link3

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:


Link1
Link2
Link3

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 result is a script error. The correct syntax should write the CSS style definition into the function, as shown below:






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, how do I move the mouse over the image on multiple pages? Is the image src changed to ** _over.jpg?


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

/* 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 */