SoFunction
Updated on 2024-07-16

Introduction to the use of CSS expression


 CSS properties can be followed by a Javas?cript expression, where the value of the CSS property is equal to the result of the Javas?cript expression's computation.? The expression can refer directly to the element's own properties and methods, or it can use other browser objects. The expression acts as if it were a member function of the element.

Assigning Values to Element Intrinsic Attributes

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

#myDiv?{
position:?absolute;
width:?100px;
height:?100px;
left:?expression(?-?110?+?"px");
top:?expression(?-?110?+?"px");
background:?red;
}

Assigning a value to an element's custom attribute

For example, eliminating link dotted boxes on a page.? The usual practice is:

<a?href=""?onfocus="()">link1</a>
<a?href=""?onfocus="()">link2</a>
<a?href=""?onfocus="()">link3</a>?

Rough look may not reflect the advantages of using expression, but if you have dozens or even hundreds of links on the page, this time you will still be mechanical Ctrl + C, Ctrl + V it, not to mention a comparison of the two, which produces more redundant code?

The use of expression is done as follows: ?

<style?type="text/css">
a?{star?:?expression(onfocus=)}
</style>
<a?href="">link1</a>
<a?href="">link2</a>
<a?href="">link3</a>?

   Description: inside the star is their own arbitrarily defined attributes, you can with their own preferences in addition to the definition, and then included in the expression () statement is the JS script, in the customization of the attributes and expression between the don't forget that there is also a quote, because the essence is still CSS, so put in style tags, rather than s?cript. ok. OK, so it's easy to get rid of the link dashes on the page in one sentence. Don't get carried away, though, because if the effect is triggered by a change in a CSS property, the result will be different from what you intended. For example, if you want to change the color of a text box on a page as you move the mouse in and out, you might be tempted to write ?

<style?type="text/css">
input?
{star?:?expression(onmouseover=="#FF0000";
onmouseout=="#FFFFFF")}
</style>
<style?type="text/css">
input?{star?:?expression(onmouseover=="#FF0000";
onmouseout=="#FFFFFF")}
</style>
<input?type="text">
<input?type="text">
<input?type="text">

But the result is a script error, the correct way to write the CSS style definition should be written into the function, as shown below:

<style?type="text/css">
input?{star?:?expression(onmouseover=function()
{="#FF0000"},
onmouseout=function(){="#FFFFFF"})?}
</style>
<input?type="text">
<input?type="text">
<input?type="text">?

take note of

is not very necessary, it is generally not recommended to use expression, because expression on the browser resource requirements are relatively high.