最近有個同學問我JS方便的知識,藉此研究下,以下文章部分摘自網路。
用JavaScript修改網頁樣式
一、局部改變樣式
分為改變直接樣式,改變className和改變cssText三種。需要注意的是:
注意大小寫:
javascript對大小寫十分敏感,className不能夠把“N”寫成“n”,cssText也不能夠把“T”寫成“t”,否則無法實現效果。
調用方法:
如果改變className,則事先在樣式表中申明類,但調用時不要再跟style,像document.getElementById('obj').style.className="..."的寫法是錯誤的!只能寫成:document.getElementById('obj').className="..."
改變cssText
但是如果用cssText的話,必須加上style,正確的寫法是:document.getElementById('obj').style.cssText="..."
改變直接樣式我就不必說了,大家記得要寫到具體樣式即可,如
document.getElementById('obj').style.backgroundColor="#003366"
二、全域改變樣式
通常情況下,我們可以通過改變外鏈樣式的的href的值實現網頁樣式的即時切換,也就是“改變模板風格”。這時候我們首先需要賦予需要改變的目標一個id,如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
調用時很簡單,如
<span on click="javascript:document.getElementById('css').href = 'ie.css'">點我改變樣式</span>
對於新人往往不知道CSS具體樣式在javascript怎麼寫,而且有時候在不同瀏覽器中要求也不一樣。如float在IE中寫成styleFloat,在FIREFOX中寫成cssFloat,這就需要大家的積累了。在google中搜尋“ccvita javascript”,也許會對你的疑惑有所協助。
三、Regex
g 代表全域匹配
m 代表可以進行多行匹配
i 代表不區分大小寫匹配
^ 匹配輸入字串的開始位置
$ 匹配輸入字串的結束位置
* 匹配前面的子運算式零次或多次. 等價於{0,}
+ 匹配前面的子運算式一次或多次. 等價於{1,}
? 匹配前面的子運算式零次或一次. 等價於[0,1} , 當該字元跟在任何一個其他限制符(*, +, ?, {n}, {n,}, {n,m}) 後面時,匹配模式是非貪婪的。非貪婪模式儘可能少的匹配所搜尋的字串,而預設的貪婪模式則儘可能多的匹配所搜尋的字串。例如,對於字串 "oooo",'o+?' 將匹配單個 "o",而 'o+' 將匹配所有 'o'。
\d 匹配一個數字字元. 等價於 [0-9]
\D 匹配一個非數字元. 等價於 [^0-9]
\w ,等價於 "[A-Za-z0-9_]"
\W 匹配任何非單詞字元,等價於 "[^A-Za-z0-9]"
\s 匹配任何空白字元, 包括空格 定位字元 換頁符 等等. 等價於[\f\n\r\t\v]
\S 匹配任何非空白字元. 等價於 [^\f\r\n\t\v]
\b 匹配一個單詞邊界,也就是指單詞和空格間的位置。
\B 匹配非單詞邊界。
Regex常用js方法:
/**<br />* 在源字串中尋找滿足要求的子串.<br />* @return {}<br />*/<br />function MatchDemo() {<br />var r, re; // 聲明變數。<br />var s = "The rain in Spain falls mainly in the plain";<br />re = new RegExp("ain", "g"); // 建立Regex對象。<br />r = s.match(re); // 在字串 s 中尋找匹配。<br />return (r);<br />} </p><p>/**<br />* 返回在源字串中的滿足Regex的全部的字串和位置資訊.<br />*/<br />function RegExpTest() {<br />var ver = Number(ScriptEngineMajorVersion() + "."<br />+ ScriptEngineMinorVersion())<br />var ans = '';<br />if (ver >= 5.5) { // 測試 JScript 的版本。<br />var src = "The rain in Spain falls mainly in the plain.";<br />var re = /\w+/g; // 建立Regex模式。<br />var arr;<br />while ((arr = re.exec(src)) != null)<br />ans += arr.index + "-" + arr.lastIndex + arr + "\t";<br />} else {<br />ans = "請使用 JScript 的更新版本";<br />}<br />return ans;<br />} </p><p>/**<br />* 對源字串進行Regex檢查,看是不是符合Regex.<br />*/<br />function TestDemo() {<br />var s1;<br />var source = "abcdefg";<br />var regex = /\w+/g; // 建立Regex模式。<br />if (regex.test(source))<br />s1 = " contains ";<br />else<br />s1 = " does not contain ";<br />return ("'" + source + "'" + s1 + "'" + regex.source + "'");<br />} </p><p>/**<br />* 在源字串中尋找Regex的字串.<br />* @return {}<br />*/<br />function SearchDemo() {<br />var r, re;<br />var s = "The rain in Spain falls mainly in the plain.";<br />re = /falls/i;<br />r = s.search(re);<br />return (r);<br />}
詳細出處參考:http://www.jb51.net/article/26005.htm,更多請搜尋:JavaScript CSS修改學習第X章
未完,待續……