Use CSS to dynamically control text attributes
This article describes in detail the topic of the document that uses CSS to dynamically control text attributes. The attribute values of CSS can be dynamically changed to define multiple attribute values of the text and trigger them with an event. Once an event occurs, then, the text attribute value is changed to achieve the expected purpose.
CSS allows you to easily and dynamically change the attributes of a text, so that you can create webpage effects such as dynamically increasing, narrowing, changing the color of the text, changing the background, spacing, and line spacing of the text, everything is under your control. Is it a bit mysterious? This is the case. That must be complicated, right? No! After reading this article, you will understand that it is so simple.
See the following example:
1. dynamically change the text size
The effect of this example is: a text. When the mouse is over the text, the text becomes larger, and the text is restored when the mouse leaves.
Production method:
1. In Dreamweaver3, use the CSS Panel to define two CSS classes. One class named "style1" is defined as a large character (18px), and the other is named "style2 ", it is defined as a small character (12px ). The obtained CSS code is as follows:
Users who do not use Dreamweaver can copy the above Code directly to the webpage codeAnd.
2.
Add this code to the tag: onmouseover = "this. className = ''style1'" onmouseout = "this. className = ''style2 ''". At this point, the source code of the text that can produce results is as follows:
When you move the mouse over the text, the text becomes larger and the text becomes smaller when you move the mouse away.
If you do not use Dreamweaver, you only need to change the code to the above. You can preview the code to see the actual effect.
2. dynamically change the text size, color, and bold
The effect of this example is: when the mouse is over the text, the size and color of the text are changed and bold, and the size and color of the text are restored when the mouse leaves.
The production method of this example is the same as that of Example 1. The difference is that different text attributes are defined in CSS, so the production method is no longer repeated. InAndThe added CSS code is:
The source code of the text that can produce results is as follows:
Move the mouse over the text, change the text size, color, bold, and restore the original sample when the mouse leaves.
3. dynamically change the background of some texts
The effect of this example is: When you move the mouse over a text, the background of some text in this line changes, while the background of another text in this line remains unchanged.
This example is somewhat different from the above example in the production method. In the above example, the attributes of the entire text are changed, so the trigger event is loaded on the P mark; in this example, only the background color of a part of the text is changed. Therefore, you should use the "Span" flag to enclose the text to change the background, then, load the trigger event to the Span tag.
In this exampleAndThe added CSS code is:
The source code of the text that can produce results is as follows:
When you move the cursor over the text, the background changes, but the background of another line remains unchanged.
4. Add icons to the hyperlink dynamically
The effect of this example is: When you move the mouse over a hyperlink, an image will appear on the left of the hyperlink, move the mouse away, and the image disappears.
In this example, the production method is the same as in the previous example, which changes the background of the text. However, pay attention to the following points during the production:
1. When setting the CSS background, select the image background. When setting the "repeat" parameter of the image background, select "no-repeat" (not tiled );
2. When setting a hyperlink, reserve the position of the image on the left;
3. The trigger event must be loaded on the hyperlink.
In this exampleAndThe added CSS code is:
The source code of the hyperlink that can produce results is as follows:
Move the mouse over
By dynamically changing the CSS attributes of a text, you can also make many special effects, but the methods are basically the same. You can use your imagination to create them without having to illustrate them one by one.
