Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use expression expression in CSS". In daily operation, I believe many people have doubts about how to use expression expression in CSS. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt about "how to use expression expression in CSS". Next, please follow the editor to study!

Here is the CSS style

Input {

Border:1px solid # B3D6EF;

Background:#ffffff

}

Input {

Star: _ expression (

Onmouseover=function () {this.style.backgroundColor= "# D5E9F6"}

Onmouseout=function () {this.style.backgroundColor= "# ffffff"})

}

The advantage is that you don't have to write a bunch of onMouseover functions on the page.

Lolo

Some problems need to be noted, this writing may cause browser jam under IE6, currently doing an old jam phenomenon.

The biggest problem with the CSS Expression feature in browsers: it executes repeatedly, probably hundreds of times per second, with serious performance problems.

How to optimize CSS Expression?

At the very least: if we execute the CSS Expression only once in the matching element, the performance will be greatly improved.

Solution:

In the body of the CSS Expression statement, the CSS property reset of the Expression will be triggered.

Copy the code

The code is as follows:

Div {

Zoom: _ expression (function (el) {el.style.zoom = "1"; alert (el.tagName);} (this))

}

Or

Copy the code

The code is as follows:

Div {

-singlex: _ expression (this.singlex? 0: (function (t) {alert (t.tagName); t.singlex = 0;}) (this))

}

Explain ~:

CSS Expression executes on any matching element.

Within CSS expression, the "this" keyword points to the currently matching HTML element.

The CSS property is triggered by some uncommonly used properties, and the reset is returned to the default value after the trigger.

With regard to Expression, the Yahoo team mentioned these

Avoid using CSS expressions (Expression)

CSS expressions are a powerful (but dangerous) way to set the CSS property dynamically. Internet Explorer has supported CSS expressions since version 5. In the following example, you can use the CSS expression to switch the background color every other hour:

Background-color: _ expression ((new Date ()) .getHours ()% 2? "# B8D4FF": "# F08A00")

As shown above, JavaScript expressions are used in expression. The CSS property is set based on the result of the evaluation of the JavaScript expression. The expression method does not work in other browsers, so it is useful to set it separately for Internet Explorer in cross-browser designs.

The problem with expressions is that they are calculated more frequently than we think. It will be recalculated not only when the page is displayed and zoomed, but also when the page scrolls or even moves the mouse. Add a counter to the CSS expression to track how often the expression is evaluated. You can easily reach more than 10000 calculations by moving the mouse on the page.

One way to reduce the number of times CSS expressions are evaluated is to use an one-time expression that assigns the result to the specified style property on the first run and replaces the CSS expression with this property. If style properties must change dynamically during the page cycle, it is possible to use event handlers instead of CSS expressions. If you have to use CSS expressions, keep in mind that they have to be evaluated thousands of times and may affect the performance of your page.

At this point, the study on "how to use expression expressions in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.