麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第31篇) CSS 與 JavaScript 下篇 [打印本頁]

作者: 小誌 時間: 2010-5-19 08:58 標題: (教學第31篇) CSS 與 JavaScript 下篇

動態樣式
網頁標籤，如：<P>、<BODY>…等，都是網頁中的元件，當我們在CSS串列表中將網頁元件的屬性加以設定後，則網頁中凡是被該元件標籤包括者，其樣式將全部相同，如下例：

<HTML>
<HEAD>
<TITLE>相同樣式</TITLE>
<style type="text/css">
<!--
p{color:#ff8000;font-size:14pt}
//-->
</style>
</HEAD>
<BODY>
<P>
這是在P標籤內的文字
</P>
<P>
這也是在P標籤內的文字
</P>
</BODY>
</HTML>

複製代碼

[attach]736[/attach]

或許你會說，那我就直接在每個元件標籤中個別以STYLE屬性設定，這樣就可以使用相同元件標籤而創造不同樣式的內容了ㄚ！這是靜態的設定，當然可以（被元件標籤包括者，樣式不變）！如果我要被元件標籤包括者能夠動態改變它的樣式呢？單純的樣式設定是辦不到的！我們必須再加上JavaScript的利用才行。

動態變更樣式
假設網頁中有一個超鏈結，我希望在滑鼠指標還沒有碰到它的時候是藍色字、大小14pt，而當滑鼠碰觸到它的時候，則變成紅色字、大小16pt，該如何處理？

實例學習：

<HTML>
<HEAD>
<TITLE>動態鏈結樣式</TITLE>
<style type="text/css">
<!--
.outlink{color:#0000ff;font-size:14pt}
.onlink{color:#ff0000;font-size:16pt}
//-->
</style>
</HEAD>
<BODY>
<A HREF="http://www.twbts.com"
class="outlink"
onMouseOver = "this.className='onlink'"
onMouseOut = "this.className='outlink'"
>
麻辣學園
</A>
</BODY>
</HTML>

複製代碼

首先我們先利用CSS樣式表，建立兩種樣式類別：「outlink」、「onlink」，「outlink」類別為滑鼠指標還沒有碰到超鏈結或碰到超鏈結後又移開的超鏈結外觀樣式，「onlink」類別為滑鼠指標移到超鏈結上超鏈結的外觀樣式。
在超鏈結<A>標籤中我們設定這個超鏈結的class類別屬性為「outlink」，這代表我們預設超鏈結一開始的外觀樣式為CSS樣式表「outlink」類別所指定的樣式。當超鏈結標籤發生「onMouseOver」、「onMouseOut」的事件時，再度變更超鏈結所對應的CSS樣式表類別所指定的樣式。
[attach]737[/attach]

提示！！
在css樣式表中單純的定義一個屬性類別，必須在數行名稱之前加上一個點「.（dot）」，如上例原始碼的第6、7行。
動態樣式的變更不只是超鏈結可以使用，表單元件也可以使用。

實例學習：
下列這個範例是動態的改變標單按鈕元件的外觀樣式，當滑鼠移至按鈕上時將其背景顏色改變為黑色，文字變成白色，而當滑鼠移開按鈕上時將其背景顏色改變為黃色，文字變成紅色。

<HTML>
<HEAD>
<TITLE>動態按鈕樣式</TITLE>
<style type="text/css">
<!--
.out{color:red;background=yellow}
.on{color:white;background=black}
//-->
</style>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=BUTTON VALUE="動態按鈕樣式"
class="out"
onMouseOver = "this.className='on'"
onMouseOut = "this.className='out'"
>
</FORM>
</BODY>
</HTML></A>
</BODY>
</HTML>

複製代碼

[attach]738[/attach]

作者: 小誌 時間: 2010-5-19 09:04

非標籤內動態變更樣式
上一節中，我們都是直接在標籤內設定元件的類別屬性，或是以事件處理器來控制類別屬性的變更，在事件處理器中的程式敘述，我們直接以『this』關鍵字來代替標籤本身的全名，所以我們並沒有設定標籤的名稱就可以直接變更標籤的屬性，問題是：如果我們的程式碼並不是直接撰寫在事件控制器中，那這改變標籤屬性的程式敘述該如何寫？

要在標籤之外設定其屬性，我們必須為標籤訂立一個名稱屬性，但這個名稱屬性並不是『NAME』！而是『ID』，如下例：

<P ID=”my”>麻辣學園</p>

複製代碼

如果我們要改變上例文字的樣式類別，則必須透過它的「ID」屬性來進行：

document.all.mylink.className="outlink"

複製代碼

我們之前說過：「document物件指的就是網頁文件本身」，那我們為何在上式中不直接寫成：

document.mylink.className="outlink"

複製代碼

因為在我們使用CSS樣式表來定義網頁元件樣式時，我們的JavaScrip不可以直接以元件的名稱去控制，而必須透過「all」屬性來控制，「all」就代表網頁文件中全部的元件集合，所以沒有透過all屬性就無法控制HTNL標籤元件。

實例學習：
以事件控制器呼叫函式的方式進行超鏈結樣式設定。

<HTML>
<HEAD>
<TITLE>動態鏈結樣式</TITLE>
<style type="text/css">
<!--
.outlink{color:#0000ff;font-size:14pt}
.onlink{color:#ff0000;font-size:16pt}
//-->
</style>
<SCRIPT Language="JavaScript">
function change(stau)
{
if (stau=="in")
{document.all.mylink.className="onlink"}
if (stau=="out")
{document.all.mylink.className="outlink"}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.twbts.com"
ID="mylink"
onMouseOver = "change('in')"
onMouseOut = "change('out')"
>
麻辣學園
</A>
</BODY>
</HTML>

複製代碼

在程式碼第23-27行中，我們建立了一個超鏈結標籤，並設定其ID為「mylink」，當滑鼠指標移入或移出超鏈結時，都會呼叫change()函式來動態改變超鏈結的外觀樣式，不過，在滑鼠指標移入及移出超鏈結時，傳遞給change()函式的參數內容是不同的，「in」代表滑鼠指標移入超鏈結，「out」為滑鼠指標移出超鏈結。
程式碼第11-19行，當change()函式被呼叫時，將會進行參數內容的判斷，如果是「in」則將名稱為「mylink」的網頁元件的樣式類別設定為「onlink」；如果是「out」則將名稱為「mylink」的網頁元件的樣式類別設定為「outlink」。
[attach]739[/attach]

以改變類別設定達到變更網頁元件的外觀是非常方便，但如果只是要改變網頁元件的某一種樣式屬性呢？仍然必須使用類別設定嗎？這倒不必，我們可以直接透過「style」屬性來做就可以了，下表為「style」屬性常見的五種樣式屬性：

屬性	作用
fontSize	字型字體大小
fontWeight	字型樣式（如：斜體）
fontFamily	字型(如：細明體)
color	顏色
background	背景

實例學習：
建立一程式，在網頁中佈置表單單選按鈕元件，由瀏覽者自行決定文字字串背景顏色。

<HTML>
<HEAD>
<TITLE>更換背景色</TITLE>
<SCRIPT Language="JavaScript">
function change(color)
{
document.all.mycolor.style.background=color
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="radio" name="r" onClick="change('red')">背景色一<br>
<input type="radio" name="r" onClick="change('green')">背景色二<br>
<input type="radio" name="r" onClick="change('blue')">背景色三<br>
</form>
<DIV ID="mycolor">
請選擇背景色
</DIV>
</BODY>
</HTML>

複製代碼

[attach]740[/attach]

作者: 小誌 時間: 2010-5-19 09:09

元件定位
CSS提供了網頁元件位置的中靜態定位（position）方法，而動態定位則是透過CSS物件模式的定位功能，再配合JavaScript的定位運算處理改變網頁元件的位置。定位的方式可分為絕對定位與相對定位：

相對定位
當我們將position定位屬性的值設定為「relative」，則網頁元件的位置將與網頁文件中的其他元件分離而獨立於網頁排版格式之外，如果只是單純的將元件的position定位屬性的值設定為「relative」，元件將不會改變網頁排版的格式，但若同時設定了網頁元件的「left」與「top」屬性值，則元件將會脫離網頁排版的位置格式，如下例：

<HTML>
<HEAD>
<TITLE>相對定位</TITLE>
<style type="text/css">
<!--
.myposition{
color:#0000ff;
font-size:14pt;
position:relative;
top:10px;
left:10px;
}
//-->
</style>
</HEAD>
<BODY>
<P>這是一個同時設定網頁元件的定位與位置的範例
<font class="myposition" ID="txt">文字位置</font>
將脫離原本的網頁排版格式,在元件原始的位置上將留下空白</P>
</BODY>
</HTML>

複製代碼

[attach]741[/attach]

絕對定位
絕對定位會將網頁元件設定在網頁文件之外的位置，而成為一獨立的個體，只要將網頁元件的position定位屬性的值設定為「absolute」，如下例：

<HTML>
<HEAD>
<TITLE>絕對定位</TITLE>
<style type="text/css">
<!--
.myposition{
color:#0000ff;
font-size:14pt;
position:absolute;
top:10px;
left:10px;
}
//-->
</style>
</HEAD>
<BODY>
<P>這是一個同時設定網頁元件的定位與位置的範例
<font class="myposition" ID="txt">文字位置</font>
將脫離原本的網頁排版格式,在元件原始的位置上將不會留下空白,
因為網頁元件已經獨立於網頁主體之外</P>
</BODY>
</HTML>

複製代碼

[attach]743[/attach]
請注意：「文字位置」這四個字，已經獨立於網頁文件之外，所以原來正常的位置上就不會留下空白位置。

提示！！
網頁元件的left、top、width、height等屬性設定值單位可以是：百分比、點距、像素、ems等。

作者: 小誌 時間: 2010-5-19 09:13

隱藏元件
設定元件的「visibility」屬性，將可決定網頁元件的顯示與否，如果將及屬性值設定為「hidden」，則網頁元件將會被隱藏起來，其預設屬性值為「visible」，代表不隱藏元件。

實例學習：文字提示方塊
當我們將滑鼠指標移至特定文字字串上時將出現一個提示方塊，當滑鼠指標離開文字字串上時提示方塊將自動隱藏：

[attach]744[/attach]

<html>
<head>
<title>文字提示方塊</title>
<STYLE>
<!--
div.tiptext{
position:absolute;
visibility:hidden;
border-style:solid;
border-width:3;
border-color:Green;
background-color:Yellow;
}
p.text{
font-style:italic;
color:Red;
}
-->
</STYLE>
<script language="JavaScript">
function show()
{
document.all.tips.style.visibility='visible'
}
function hide()
{
document.all.tips.style.visibility='hidden'
}
</script>
</head>
<body>
<div class="tiptext" id="tips">這是說明的方塊</div>
<p class="text" onMouseOver="show()" onMouseOut="hide()" >
會產生提示的字串
</p>
</body>
</html>

複製代碼

這個範例的原理很簡單，我們只是在事件處理器呼叫函式時將網頁元件隱藏或顯示出來，當滑鼠指標移入文字字串則呼叫show()函式改變網頁元件（提示方塊tips）的「visibility」屬性值為「visible」，將網頁元件顯現出來，滑鼠指標移出文字字串則呼叫hide()函式將網頁元件（提示方塊tips）的「visibility」屬性值為「hidden」，將網頁元件隱藏起來。

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)