Expression will be JS, CSS combined

Source: Internet
Author: User
Tags define object definition expression interface
Css|express|js

IE5 and its later versions support the use of expression in CSS to associate CSS properties with Javas cript expressions, where CSS attributes can be intrinsic or custom attributes of an element. This means that the CSS property can be followed by a javas cript expression, and the value of the CSS property equals the result of the Javas cript expression calculation. You can refer directly to the properties and methods of an element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.

Assigning values to intrinsic attributes of an element

For example, you can place the position of 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;
}

Assigning values to element custom attributes

For example, eliminate the link dashed box on the page. The usual practice is to:

<a href= "link1.htm" >link1</a>
<a href= "link2.htm" >link2</a>
<a href= "link3.htm" >link3</a>

Coarse look may also reflect the use of expression advantage, but if your page has dozens of or even hundreds of links, at this time you will also mechanical ctrl+c,ctrl+v Mody, not to mention the two comparisons, which produces more redundant code?

The use of expression is as follows:

<style type= "Text/css" >
A {star:expression (Onfocus=this.blur)}
</style>
<a href= "link1.htm" >link1</a>
<a href= "link2.htm" >link2</a>
<a href= "link3.htm" >link3</a>

Description: The inside of the star is its own arbitrary definition of attributes, you can follow their own preferences to define another, and then included in the expression () of the statement is a JS script, in the custom attribute and expression between do not forget to have a quotation mark, because the essence or CSS, So put it inside the style label, not s cript. OK, so it is easy to use a word to achieve the link in the Page dashed box elimination. But you should not be complacent, if the trigger effect is a CSS attribute changes, then the results will be different from your original intention. For example, if you want to change the color of a text box in a page by moving it out of the mouse, you might take it for granted that you should write

<style type= "Text/css" >
Input
{star:expression (onmouseover=this.style.backgroundcolor= "#FF0000";
Onmouseout=this.style.backgroundcolor= "#FFFFFF")}
</style>
<style type= "Text/css" >
Input {star:expression (onmouseover=this.style.backgroundcolor= "#FF0000";
Onmouseout=this.style.backgroundcolor= "#FFFFFF")}
</style>
<input type= "Text" >
<input type= "Text" >
<input type= "Text" >

But the result is a script error, the correct writing should be the definition of CSS style into the function, as follows:

<style type= "Text/css" >
Input {star:expression (Onmouseover=function ()
{this.style.backgroundcolor= "#FF0000"},
Onmouseout=function () {this.style.backgroundcolor= "#FFFFFF"})}
</style>
<input type= "Text" >
<input type= "Text" >
<input type= "Text" >

Attention

Not very much, it is generally not recommended to use expression because expression is more demanding on browser resources.

Example: Using CSS expression to realize batch control of interface object

Problem Description: Using CSS styles We know that you can define the class attribute of a batch of objects to specify the same style to unify the interface. But how do you unify events of the same type of objects? For example: The interface has countless How to implement the mouse through this picture, the picture of Src become **_over.jpg?


Workaround: Use the CSS expression method,
Specific implementation to see. The style of CSS:

/* Replace picture css*/
#imgScript {/* Here you use object IDs to match styles, or you can define a CSS function.
Star:expression (
onmouseover = function ()
{
/* Replace 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*/



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.