Introduction to the use of CSS expression_CSS/HTML

IE5 and later versions support the use of expression in CSS to associate CSS attributes with Javascript expressions. The CSS attributes here can be inherent attributes of the element or custom attributes.

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 you can use other browser objects. The expression is as if it were within a member function of this element.

Assign values ​​to the inherent attributes of elements

For example, you can position an element based on 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 values ​​to custom attributes of elements

For example, eliminate the link dashed box on the page. ?The usual approach is:

link1
link2
link3?

At first glance, the advantages of using expression may not be apparent, but if there are dozens or even hundreds of links on your page, will 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:?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

Explanation: The star inside is an attribute defined by yourself. You can define it as you like. Then the statement contained in expression() is the JS script. Don’t forget that there are other attributes between the custom attribute and expression. A quotation mark, because the essence is still CSS, so it is placed in the style tag instead of the s?script. OK, this makes it 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 ?

input?
{star?:?expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this .style.backgroundColor="#FFFFFF")}


input?{star?:?expression(onmouseover=this .style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}

But the result is a script error. The correct way to write it is to write the definition of CSS style into the function, as shown below:

input?{star?:?expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})?}



?

Attention

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