在 css 中執行 js 陳述式 (IE only)

今天在逛同事 Bruce 的部落格, 看到了一個在 CSS 裡執行 js 的方式
原來還有這一招阿! 趕快給它學起來...

<style>
a{
noframe:expression(this.onFocus=this.blur());
/*noframe為自訂屬性名，可替換為任意名稱*/
}
img.altImg1{
text:expression(src="myImage.jpg");
width:expression(300 +"px");
}
</style>

...(略)

<img id="altImg" class="altImg1">
<a href="#">這個連結點下去時不會有虛線框</a>

如上，透過在 css 裡面執行 expression() 方法，就可以替該 DOM 元素的屬性給值
但可別高興得太早阿
經過我驗證之後，發現這個功能是 IE 擴充的，而非 W3C 標準
也就是說它在其他瀏覽器上沒有作用!!
哇哩咧...這不是白玩了嗎??
不過也許可以利用這一點來做一些 IE hack
例如 IE 不支援的 fixed定位，或是 max-width 與 max-height
下次有機會再來 try try 看吧

讓 IE 8 以下版本對 CSS 有更佳支援度的方法

昨天碰到一個 IE6 下的網頁樣式問題，因為一直解不掉覺得很傷腦筋
今天不甘心上網查詢看看
後來去同事 Bruce 的部落格竟然找到解決方法!!
趕快我也記錄下來：

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

將以上這段碼貼到 head 標籤區塊內
就可以讓 IE 8 以下版本對 CSS 有更佳支援度歐

大家可以試試看呦!!
在此也感謝 Bruce 啦!!

出處：
http://code.google.com/p/ie7-js/

HTML DOM Location Object

屬性：

Property	Description
href	完整 URL
protocol	URL 的通訊協定
hostname	URL 的域名
port	URL 的 port
host	URL 的域名與 port
pathname	域名後面的路徑(不含參數)
hash	hash(#)參數的值, (可用於 Anchor )
search	? 後面的參數與值

方法：

Method	Description
assign(URL)	前往指定的 URL
reload()	-
replace(newURL)	將目前頁面換成指定的 URL

HTML DOM History Object

屬性：
length
// history list 的 length

方法：

Method	Description
back()	回 history list 的上一頁
forward()	到 history list 的下一頁
go(number|URL)	移動到 history list 的某一頁

HTML DOM Screen Object

Property	Description
width	-
height	-
availWidth	螢幕可視範圍寬(視窗最大化能多寬)
availHeight	螢幕可視範圍高(視窗最大化能多高)
deviceXDPI	螢幕的 x 解析度(DPI)
deviceYDPI	螢幕的 y 解析度(DPI)
logicalXDPI	螢幕正常 x 解析度(DPI)
logicalYDPI	螢幕正常 y 解析度(DPI)
colorDepth	色彩品質(16bits、24bits、32bits...)
pixelDepth	(此屬性 IE 不支援)
bufferDepth	色彩緩衝區大小
fontSmoothingEnabled	是否設定螢幕字型平滑
updateInterval	螢幕的 update interval

window.open() 可設定的視窗屬性

width	最小值 100
height	最小值 100
left	x
top	y
resizable	Default is yes
titlebar	標題列. Default is yes
location	網址列. Default is yes
toolbar	工具列. Default is yes
menubar	功能表列. Default is yes
directories	連結列. Default is yes
scrollbars	捲動軸. Default is yes
status	狀態列. Default is yes
fullscreen	full-screen mode. Default is no.
channelmode	Default is no

同場加映：把視窗放到最大可以這樣寫
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);

HTML DOM Window Object

屬性：

Property	Description
self	-
parent	-
top	-
opener	-
name	-
closed	window 是否已關閉
document	Document object
toolbar	是否顯示 tool bar
scrollbars	是否顯示 scrollbars
statusbar	是否顯示 statusbar
personalbar	是否顯示工具列
defaultStatus	statusbar 的 default text
status	statusbar 的內容
history	History object
location	Location object
outerheight	整個視窗的 height
outerwidth	整個視窗的 width
pageXOffset	window 在視窗中的 X 座標
pageYOffset	window 在視窗中的 Y 座標
length	該視窗的頁框數量
frames[]	該視窗的頁框陣列

方法：

Method	Description
open([URL,name,specs,replace])	-
close()	-
print()	-
focus()	-
blur()	-
createPopup()	彈出視窗
alert(message)	彈出訊息框
confirm(message)	彈出確認框
prompt(message,defaultText)	彈出輸入框
moveBy()	從目前位置移動視窗
moveTo()	移動視窗到指定座標
resizeBy()	依目前大小 Resize 視窗
resizeTo()	Resize 視窗到指定大小
scrollBy()	依目前顯示內容捲動視窗
scrollTo(x, y)	捲動視窗到指定座標
setInterval(func,millisec[,"lang"])	循環計時器(每 millisec毫秒執行 func 方法)
setTimeout(func,millisec[,"lang"])	計時器(每 millisec毫秒執行 func 方法)
clearInterval(id)	利用 setInterval 回傳的 id 值清除之
clearTimeout(id)	利用 setTimeout 回傳的 id 值清除之

JavaScript 的 RegExp 物件

RegExp 是 Regular Expression 的縮寫, 用來當作一種 pattern

例:
var pattern1 = new RegExp("e"); //用來在字串中找 e 的 pattern

RegExp 的方法:
test()
//Returns true or false

exec()
//Returns the text of the found value. If no match is found, it returns null

compile()
//change both the search pattern, and add or remove the second parameter.

更多正規表示式相關資訊( W3Schools )

JavaScript 的 Error 物件

try..catch..finally:
try{
.....
}catch(e){ //錯誤處理
.....
}finally{
.....
}

throw:
throw(exception);


Error 物件的屬性:
number 錯誤碼(32bit)
message 錯誤說明字串
description 錯誤描述


onerror 事件:
onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

JavaScript 的 函數與物件

alert(msg) //彈出 alert 對話框
confirm(msg) //彈出 confirm 對話框, 使用者按"OK"回傳true, 按"cancel"回傳false
prompt(msg, [defaultValue]) //彈出 prompt 字串輸入框

arguments //參數陣列
prototype //new 出來的物件可指定 prototype

parseInt() //轉型成整數
parseFloat() //轉型成浮點數

escape(string) //將字串轉成url編碼
unescape(string) //將url編碼轉回字串

String 物件:
toLowerCase() //字串轉為小寫
toUpperCase() //字串轉為大寫
charAt(i) //字串的第 i 個字元(由 0 開始)
charCodeAt(i) //字串的第 i 個字元(由 0 開始)的 Unicode 字碼
indexOf(string, i) //搜尋(第 i 個) string 字串的起始索引, 沒找到則傳回-1
lastIndexOf(string) //從最後面開始搜尋字串起始索引, 沒找到則傳回-1
match(string) //若字串包含該 string 則回傳, 若否則為 null (正規表示)
search(string) //同 indexOf(string) (正規表示)
replace(str1, str2) //將字串中所有的 str1 更換成 str2
split(string) //將字串以 string 為分割符號做切割, 回傳的是 Array
subStr(i , length) //從第 i 個字元擷取 length 個字做為字串回傳
subString(i1 , i2) //從第 i1 個字元擷取到(不含)第 i2 個字元做為字串回傳
concat(string) //字串相加, 需搭配 assignment

Array 物件:
join(separator) //將 array 輸出成字串並以 separator 分隔
reverse() //字串索引反轉
sort() //排序
concat(array) //合併

Math 物件:
常數屬性:
E / LN2 / LN10 / LOG2E / LOG10E / PI / SQRT1_2 / SQRT2
方法:
max(value1, value2) //傳回較大值
min(value1, value2) //傳回較小值
random() //0~1的亂數
round() //四捨五入
floor() //無條件捨去
ceil() //無條件進位
pow() //次方
sqrt() //平方根
abs() //絕對值
exp() //自然數指數 ex
log() //自然對數
sin() / cos() / tan() / asin() / acos() / atan() //三角函數

Date 物件:
getTimezoneOffset() //傳回本地時間與 GMT 時間差, 分為單位
toGMTString() //傳回轉成 GMT 時間的字串
toLocalString() //傳回轉成本地時間的字串
parse(Date) //傳回 1970年1月1日至本地時間 Date 的毫秒數(類別方法)
UTC(Date) //傳回 1970年1月1日至 GMT 時間 Date 的毫秒數(類別方法)
getDate() / setDate()
getDay() / setDay()
getMonth() / setMonth()
getFullYear() / setFullYear()
getYear() / setYear()
getHours() / setHours()
getMinutes() / setMinutes()
getSeconds() / setSeconds()
getMilliseconds() / setMilliseconds()
getTime() / setTime() //1970年1月1日至今的秒數

JavaScript 的 Event

Event	Elements affected	What starts this event?
onabort	Image	interruption of image loading (user has clicked on another link or STOP in the browser)
onblur	Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	when element loses focus (another element is selected)
onchange	FileUpload, Select, Text, Textarea	change of data inside an element
onclick	Button, Document, Checkbox, Link, Radio, Reset, Submit	click on an element
ondblclick	Area, Document, Link	double click on an element
ondragdrop	Frame, Window	drag and drop of a shortcut or a file to the browser window
onerror	Frame, Image, Window	error in the script or while loading an image (e.g. image not found)
onfocus	Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	when an element gets focus (opposite of onblur)
onkeydown	Document, Image, Link, Textarea	pressing down a key on the keyboard
onkeypress	Document, Image, Link, Textarea	pressing (and releasing) a key on the keyboard
onkeyup	Document, Image, Link, Textarea	releasing a key on the keyboard
onload	Frame, Image, Layer, Window	end of loading
onmousedown	Button, Document, Link	pressing mouse button
onmouseout	Area, Layer, Link	mouse pointer exiting the element’s area
onmouseover	Area, Layer, Link	mouse pointer moving over an element
onmouseup	Button, Document, Link	releasing mouse button
onmove	Frame, Window	window or frame moving
onreset	Form	resetting the form
onresize	Frame, Window	changing size of a window or a frame
onselect	Textarea	selecting text
onsubmit	Form	submitting a form
onunload	Frame, Window	unloading a document (leaving the page or closing the window)