用CSS動態控制文字屬性

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇詳細介紹了用CSS動態控制文字屬性的文章主題,利用CSS的屬性值可動態改變的特點,定義文本的多種屬性值，再用一個事件來觸發，一旦事件發生，則改變文字屬性值，從而達到預期目的。

用CSS可以很方便地動態改變文本的屬性，從而可製作出動態地使文字變大、縮小、改變文字顏色、改變文本的背景、字間距、行間距等等網頁特效，一切都在你的掌握之中。是不是有點玄？事實就是如此。那一定很複雜吧？不！看完本文，你就會明白，原來這麼簡單。
請看下面的樣本：

一、動態改變文字大小
這個例子的效果是：一段文本，當滑鼠在這段文本上，文字變大，滑鼠離開時又恢複原樣。
製作方法：
1、在Dreamweaver3中，用CSS面板定義兩個CSS的class，一個取名為“style1”定義為大號字（18px）；另一個取名為“style2”，定義為小號字（12px）。獲得的CSS代碼如下：
<style type="text/css">

</style>
不使用Dreamweaver的網友可把上述代碼直接複製到網頁代碼的<head>與</head>之間。
2、在這段文字的<P>標記中加入這段代碼：onmouseover="this.className=''style1''" onmouseout= "this.className=''style2''"。至此，製作完成，能產生效果的那段文字的原始碼是這樣的：
<p onmouseover="this.className=''style1''" onmouseout="this.className=''style2''"><font color="#FF0000">滑鼠在這段文字上，文字變大，滑鼠離開時變小。</font></p>
不使用Dreamweaver的網友只要把代碼改成上面這樣就行了，預覽一下就可看到實際效果了。

二、同時動態地改變文字的大小、顏色、加粗
這個例子的效果是：滑鼠在文字上，文字的大小、顏色發生改變且加粗，滑鼠離開時恢複原樣。
這個例子的製作方法與例一相同，不同的只是在CSS中定義了不同的文字屬性，所以製作方法不再重複。在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">

</style>
製作完成，能產生效果的那段文字的原始碼是這樣的：
<p class="style4" onmouseover="this.className=''style1''" onmouseout="this.className=''style2''">滑鼠在這段文字上，改變文字的大小、顏色、加粗，滑鼠離開時恢複原樣。</p>

三、動態改變部分文本的背景
這個例子的效果是：當滑鼠移到某行文本上，這行一部分文本的背景改變了，而本行的另一段背景卻不變。
這個例子與上面的例子在製作方法上有點改變，上面的例子都是對整段文本的屬性進行改變，所以把觸發事件載入在“P”標記上；而本例是只改變一段文本的一部分的背景顏色，所以應先用"Span"標記把要改變背景的文本括起來，然後把觸發事件載入到“Span”標記上。
本例在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">

</style>
製作完成，能產生效果的那段文字的原始碼是這樣的：
<p><span class="style6" onmouseover="this.className=''style1''" onmouseout="this.className=''style1''">當滑鼠移到這段文本上，背景改變了，</span>而本行的另一段背景卻不變。</p>

四、給超級連結動態加表徵圖
這個例子的效果是：當滑鼠移到某個超級連結上，它的左邊會出現一個圖象，滑鼠移開，圖象消失。
本例在製作方法上與上例相同，都是改變文本的背景，但在製作時要注意幾點：
1、在設定CSS的背景時是選擇圖象背景，並在設定圖象背景的“repeat”參數時要選擇“no-repeat”（不平鋪）；
2、在設定超級連結時，在其左邊要預留出圖象的位置；
3、觸發事件要載入在超級連結上。
本例在<head>與</head>之間增加的CSS代碼為：
<style type="text/css">

</style>
製作完成，能產生效果的那個超級連結的原始碼是這樣的：
<a href="#" onmouseover="this.className=''style1''" onmouseout="this.className=''style2''">將滑鼠移動過來</a>

通過動態改變文本的CSS屬性，還可以做出許多特效，但方法基本相同，不再一一例舉了，掌握了方法，你就可以發揮想象力去創作了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More