如何修改alert樣式

1、如何修改aler樣式只能自定一個彈窗樣式首先必須明白的一點是，aler只是一個方法，而這個方法內(nèi)部是ate,這是我們無法修改的部分，而最終暴露的只有這個aler彷法名字而已,你甚至拿不到alert的屬性，因此要真正意義上的做到修改aler樣式是不可行的。有了以上這個條件基礎(chǔ)，我們能做的只有重寫aler方法，替換掉系統(tǒng)自帶的aler方法。一行代碼替換alert方法alertt看到這，就有很多人已經(jīng)明了了，首先你可以先寫好一個假的彈窗樣式，然后通過這種方式顯示出來，這種是tl三方同時更改達(dá)到效果，你也可以全部都JaaSI去完成結(jié)構(gòu)樣式的操作，今天我們的示例就是全部通過來完成結(jié)構(gòu)樣式控制。明確了基本

2、方式是通過替換alert方法，那么就開始進(jìn)一步的思考實現(xiàn)步驟。實現(xiàn)自定義alert方法的步驟確定彈窗樣式結(jié)構(gòu)結(jié)構(gòu)插入樣式控制點擊確定刪除結(jié)構(gòu)確定結(jié)構(gòu)aler容確定使用JS處理結(jié)構(gòu)于是有了下面這段代碼:alertalertalertataaratexta.a將l標(biāo)簽插入外圍a.a將按鈕插入外圍reate創(chuàng)建:最外圍標(biāo)簽reate創(chuàng)建me示內(nèi)容的標(biāo)簽reate創(chuàng)建按n鈕標(biāo)簽reate創(chuàng)縫一個文字節(jié)點ata確定te創(chuàng)建文字曲內(nèi)部結(jié)構(gòu)套入將需要顯示的內(nèi)容節(jié)點插入標(biāo)簽內(nèi)l將按鈕文字插入按鈕標(biāo)簽整/體顯示到頁面內(nèi)進(jìn)行賦值，如果用這種方式寫的話，在就可改成這里為什么不直接用方法呢，這里考慮預(yù)編譯時并不會對之

3、前調(diào)用還會是系統(tǒng)自帶。當(dāng)你初步調(diào)用時，如果不傳參數(shù)會報錯，那么我們需要一個的判斷，優(yōu)化當(dāng)前的JSB接下來我們會發(fā)現(xiàn)，我們還缺少樣式和確定關(guān)閉功能。這里完全可以用級事件綁定。代碼很快變成了這樣:確定內(nèi)部結(jié)構(gòu)套入整體顯示到頁面內(nèi)確/定綁定點擊事件刪除標(biāo)簽樣式控制還剩下最后一個樣式控制問題。為了寫起來更美觀更方便，我們需要寫一個方法來控制樣式。這樣我們就可以通過如下方式控制樣式:retext-align”:“centerwaitwait,還沒完測試后發(fā)現(xiàn)，如上的這種樣式書寫方式，下面有渲染問題，那我們換成。所以，樣式控制代碼改為.functioncss(targetO.varstr=targetOb

4、j.getttribute(style)?targetObj.getAttribute(style.for(variin.str+=i+bji+;targetObj.style.cext=str;這樣咱就解決的尷尬了，但是同時也帶來了其他問題，字符串拼接，有可能會出現(xiàn)重復(fù)屬性，因此如果你需要做一個通用的，還需要對字符串進(jìn)行查重，但對于本例來說完全夠用了。完成版的aier功能我們的e就成了這樣（樣式還是自己調(diào)吧，下面的樣式只是做個示范）headetaarettitle學(xué)堂alerttitle/headwialertalerttialert(dataarareateElementreateElem

5、entreateElementt.extreateTexte(dataata控/制樣式itiixeleftrea確定ettop:20%,width:100px,margin:0auto,background-color:#f00,font-size:20px,text-align:center);css(btn,background:blue,)/內(nèi)部結(jié)構(gòu)套入p.appendChild(textNode);btn.appendChild(btnText);a.appendChild(p);a.appendChild(btn);/整體顯示到頁面內(nèi)document.getElementsByTag

6、Name(body)0.appendChild(a);/確定綁定點擊事件刪除標(biāo)簽btn.onclick=functiona.parentNode.removeChild(a);functioncss(targetObj,cssObj)varstr=targetObj.getAttribute(style)?targetObj.getAttribute(style):for(variincssObj)str+=i+:+cssObji+;targetObj.style.cssText=str;alert(123);最后總結(jié)下，本例運(yùn)用到的知識點，DOM操作、預(yù)編譯期與執(zhí)行、for-in盾環(huán)，cssText。本文的主要目的在于引導(dǎo)思路，無論做什么項目，思路很重要，要懂得變通，如果你想通過某