Use CSS in combination with JS

Using CSS with javascript can make a lot of cool dynamic page effects. At the end of this tutorial, we will briefly introduce the application of CSS with Js. First, we need to understand the concepts of events and actions. In client scripts, JavaScript responds to events to obtain interaction with users. For example, when a user clicks a button or moves the mouse over a text segment, a click event or a mouse moving event is triggered by responding to these events, you can complete specific functions (for example, click a button to bring up a dialog box, move the mouse over the text, and then change the color of the text ).

The following describes several common events (for more events, refer to relevant materials ):

Onclick:Click the event. (It is generated when the mouse is pressed and then released .)

Ondblclick:Double-click the event. (When the mouse is pressed, released, and pressed again .)

Onmousedown:Click the event. (This is generated when you press the mouse .)

Onmouseup:Release the mouse. (The Mouse starts from the press state to the pop-up .)

Onmousemove:Move the mouse over the event. (Move the mouse over a specific element .)

Onmouseover:Move the mouse over the event. (That is, a pointer is generated when it moves from outside to an element .)

Onmouseout:Move the mouse away from the event. (It is generated when the mouse leaves a specific element .)

Onload:Load events. (Generated when the image or page ends loading .)

OnUnload:Uninstall events. (Generated when a visitor leaves the page .)

Onscroll:Scroll bar event. (This is generated when a visitor uses a scroll to move up or down .)

With the event, we add actions to the event. Here we only talk about changing the custom style of the current element. We can use this method to set two custom CSS styles. The first style is called by the object, when a mouse event is generated and the object is applied to the second CSS style, the mouse effect is shown in the following example.

Insert an image into the webpage, customize a ". Out" style, and use the gray filter to make the image black and white:

 

Apply the custom style to the image, and preview the image in the browser to make it black and white. Then we define another style ". over ", this style has no content, it is a blank style, style sheetCodeAs follows:

<Style type = "text/CSS">

<! --

. Over {}

. Out {filter: Gray}

-->

</Style>

Add "onmouseover =" this. classname = 'over' "onmouseout =" this. classname = 'out' ", which means that when the mouse passes, the image is an over style, that is, a normal color image. When the mouse leaves, the image is an out style, that is, a black and white image. Omouseover and onmouseout are mouse events. This. classname = "..." Indicates the name of the current object class ..., Note: Do not write an error in Case sensitivity. JS is very case sensitive.

In this way, the effect is completed. After the image is saved and opened in the browser, the image is black and white. When the mouse moves up, the image turns into color. When the mouse leaves, the image changes back to black and white. As long as you give full play to your imagination, you can use this. classname method to make a lot of nice mouse effects.