Use CSS to dynamically control text attributes

This topic describes how to use CSS to dynamically control text attributes.ArticleThe topic uses the CSS attribute value to dynamically change the attributes of the text. It defines multiple attribute values of the text and triggers them with an event. Once an event occurs, 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
in this example, the text becomes larger when you move the cursor over the text, when the mouse leaves, it is restored to its original state.
creation method:
1. In dreamweaver3, two CSS classes are defined using the CSS panel. One class named "style1" is defined as a large character (18px ); the other name is "style2" and is defined as a small character (12px ). The obtained CSS Code is as follows:

if you do not use Dreamweaver, you can directly copy the above Code to the and Of the webpage code..
2. Add this code to the

mark of this text: onmouseover = "this. classname = ''style1' "onmouseout =" this. classname = ''style2 ''". The Source Code of the text that can produce results is as follows:

move the cursor over the text, the text grows, and the mouse leaves the text.

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 at the same time
in this example, the effect is: move the mouse over the text, the text size and color are changed and bold. The text is 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. The added CSS code between and is:

finished, the source code of the text that can produce results is as follows:

place the cursor over the text, change the text size, color, and width, and restore the original sample when the mouse leaves.

3. dynamically change the background of some texts
in this example, when you move the cursor over a text, the background of some texts in this line has changed, but the background of another section of 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.
the CSS code added between and in this example is:

the source code of the text that can produce results is as follows:

when you move the cursor over the text, the background is changed. 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 example, the CSS code added between <Style type = "text/CSS">
<! --
. Style1 {Background: URL (image/dot.gif) No-Repeat ;}
. Style2 {Background: # ffffff}
-->
</Style>
The source code of the hyperlink that can produce results is as follows:
<A href = "#" onmouseover = "this. classname = ''style1' "onmouseout =" this. classname = ''style2' "> move the mouse over it </a>

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.