Css uses js expression to achieve effects_Experience exchange

IE5 and later versions support the use of expression in CSS to associate CSS attributes with Javascript expressions. The CSS attributes here It can be an inherent attribute of the element or a custom attribute. That is to say, the CSS attribute can be followed by a Javascript expression, and the value of the CSS attribute is equal to the result of the Javascript expression calculation. You can directly reference the properties and methods of the element itself in the expression, or use other browser objects. The expression is as if it were within a member function of this element.

Assigning values ​​to inherent properties of elements

For example, you can position an element according to the size of the browser.

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 "px"); top: expression(document.body.offsetHeight - 110 "px");
background: red;
}

Assign a value to the element's custom attribute

For example, eliminate Links on the page dotted boxes. The usual approach is:

link1
link2
link3

At a glance, the advantages of using expression may not be apparent, but if your page There are dozens or even hundreds of links on the Internet. At this time, would you still use Ctrl C and Ctrl V mechanically? What's more, comparing the two, which one generates more redundant code?

The method of using expression is as follows:

link1
link2
link3phpc nltphpcn/a>

Description: Inside The star is an attribute that you define arbitrarily. You can define it as you like. The statement contained in expression() is the JS script. Don’t forget that there is a quotation mark between the custom attribute and expression, because the essence is still CSS, so put it in the style tag instead of script. OK, so it is easy to eliminate the link dotted box in the page in one sentence. But don’t be complacent. If the special effect triggered is a CSS attribute change, the result will be different from your original 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 naturally think that it should be written as







But the result is a script error. The correct way to write it is to change the CSS style. The definition is written into the function as follows:






Note

It is not very necessary. It is generally not recommended to use expression because expression requires higher browser resources.

Example: Use expression in css to implement batch control of interface objects

Problem description: We know from using CSS styles that we can define the class attributes of a batch of objects to specify the same style. Unify the interface. But how to unify the events of objects of the same type? For example: there are countless interfaces How to realize that when the mouse passes this picture, the src of the picture becomes **_over.jpg?


Solution: Use the expression method of css,
The specific implementation depends on the writing method of .css:

/*Replace the image CSS*/
#imgScript { /* Here, the object ID is used to wildcard the style, or you can define a css function*/
star:expression(
onmouseover = function()
{
/*Replace the 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*/