javascript例子教程20120618.doc

JavaScript修改與訪問CSS我們知道JavaScript可以很方便地修改元素的CSS屬性。例如我們想要修改x元素的color屬性，只需要如下代碼就可以了：x.style.color = blue;通過修改元素的style屬性即可。唯一需要注意的是形如font-size這種有“-”的CSS屬性在JavaScript中需要改寫為fontSize。修改CSS屬性簡(jiǎn)單，但是訪問起來就不見得了。我們知道，有多種方式添加CSS樣式，而我們使用x.style.color并不一定能返回設(shè)置在x元素上的color屬性。我們需要使用比較復(fù)雜一點(diǎn)的方法。訪問元素CSS屬性很不幸，不同的瀏覽器訪問CSS屬性的方法并不完全相同。IE中需要使用元素的currentStyle屬性；而W3C標(biāo)準(zhǔn)中則使用window的getComputedStyle方法。ppk談JavaScript一書中有如下跨瀏覽器的函數(shù)來獲得一個(gè)元素的特定CSS屬性。function getRealStyle(id,styleName)var element = document.getElementById(id);var realStyle = null;if(element.currentStyle)realStyle = element.currentStylestyleName;else if(window.getComputedStyle)realStyle = window.getComputedStyle(element,null)styleName;return realStyle;我們?cè)囼?yàn)一下用下面的代碼來訪問當(dāng)前頁面中id為content的div的CSS屬性，并且把這些屬性顯示出來。JavaScript代碼如下:function getRealStyle(id,styleName)var element = document.getElementById(id);var realStyle = null;if(element.currentStyle)realStyle = element.currentStylestyleName;else if(window.getComputedStyle)/注意是windowrealStyle = window.getComputedStyle(element,null)styleName;return realStyle;function addEventSimple(obj,evt,fn)if(obj.addEventListener)obj.addEventListener(evt,fn,false);else if(obj.attachEvent)obj.attachEvent(on+evt,fn);addEventSimple(window,load,init);function init()addEventSimple(document,click,clickFunc);function clickFunc()var str = ;str += color： + getRealStyle(content,color);str += width： + getRealStyle(content,width);str += padding-top： + getRealStyle(content,paddingTop);str += margin-top： + getRealStyle(content,marginTop);str += font-size： + getRealStyle(content,fontSize);var watchScreen = document.getElementById(watchScreen);watchScreen.innerHTML = str;JavaScript拖拽性能優(yōu)化前面的拖拽例子加兩行代碼：修改前后觀察內(nèi)存使用，效果很明顯 function move(event) this.style.cursor = move; if(this.p_drag = true) p_mX = event.clientX - p_x ; p_mY = event.clientY - p_y ; /alert(p_mX); this.style.left = (parseInt(p_mX) + parseInt(p_divX) + px; this.style.top = (parseInt(p_mY) + parseInt(p_divY) + px; /移動(dòng)完元素之后，延遲一段時(shí)間 this.onmousemove = null; setTimeout(this.onmousemove = move, 100); JavaScript onload執(zhí)行多個(gè)函數(shù) 、 function addWindowOnlaod(func) var f = window.onload ; if( typeof window.onload != function ) window.onload = func ; else window.onload = function() func() ; f(); addWindowOnlaod(test1); addWindowOnlaod(test2);