This article describes in detail the theme of dynamic control of text properties with CSS, using CSS property values to dynamically change the characteristics of the text to define a variety of property values, and then use an event to trigger, once the event occurs, the text attribute value is changed, so as to achieve the intended purpose.
CSS can be very convenient to dynamically change the properties of text, which can be made to dynamically make the text bigger, smaller, change the text color, change the text background, word spacing, line spacing and so on web effects, everything in your grasp. Is it a bit mysterious? That's the way it is. That must be complicated, right? No! After reading this article, you will understand that the original is so simple.
Take a look at the following example:
first, dynamically change the size of text
The effect of this example is: A piece of text, when the mouse on the text, the text becomes larger, the mouse left and back to the original.
Production method:
1, in Dreamweaver3, the CSS panel to define two CSS class, a named "Style1" is defined as a large character (18px), and the other named "Style2", defined as the small word (12px). The CSS code obtained is as follows:
Users who do not use Dreamweaver can copy the above code directly to the page code.AndBetween.
2, in this paragraph of the text
tag, add this code: onmouseover= "This.classname=" "Style1" "onmouseout=" This.classname= "Style2". At this point, the production is completed, the text that can produce effect of the source code is this:
The mouse in this text, the text becomes larger, the mouse left time is small.
Users who do not use Dreamweaver just change the code to the top so that the preview can see the actual effect.
second, dynamically change the size of the text, color, bold
The effect of this example is: the mouse in the text, the size of the text, color changes and bold, the mouse left to return to the original.
This example is made in the same way as example one, except that different text attributes are defined in the CSS, so the production method is no longer duplicated. InAndThe added CSS code is:
The source code for the text that will produce the effect is this:
The mouse in this text, change the size of the text, color, bold, the mouse left to return to the original.
Third, dynamic change the background of some text
The effect of this example is that when you move the mouse over a text, the background of the part of the line changes, and the other section of the bank does not change.
This example is a bit different from the above example in the production method, the above example is to change the properties of the whole text, so the trigger event is loaded on the "P" mark, and this example is only a part of the text to change the background color, so you should first use "Span" tag to change the background of the text enclosed, The trigger event is then loaded onto the "Span" tag.
This example inAndThe added CSS code is:
The source code for the text that will produce the effect is this:
when the mouse moves over the text, the background changes and the other section of the bank does not change.
iv. Add icons to hyperlinks dynamically
The effect of this example is that when the mouse moves over a hyperlink, it appears on the left side of an image, the mouse moves away, and the image disappears.
This example is the same as the previous example in the production method, is to change the background of the text, but in the production of a few points to note:
1, in setting the background of the CSS is to select the image background, and in the setting of the image background "Repeat" parameter should be selected "No-repeat" (uneven shop);
2, in the setting of the hyperlink, on its left to set aside the location of the image;
3. The trigger event is to be loaded on the hyperlink.
This example inAndThe added CSS code is:
The source code for the hyperlink that produces the effect is this:
Move the mouse over
By dynamically changing the CSS properties of the text, you can also make many special effects, but the method is basically the same, no longer one by one cases, mastered the method, you can play the imagination to create.
