摘要:以上三種動態(tài)樣式注入,不同的使用場景,各有利弊,至于你想用哪一種,需要你自己權(quán)衡,睡覺去啦。。。。
前言
作為一個前端,我們都聽過結(jié)構(gòu),樣式,行為分離;關(guān)于樣式,我們都聽過外聯(lián)樣式,內(nèi)聯(lián)樣式和行內(nèi)樣式;關(guān)于這三者,什么權(quán)重啊,啊,對了,這些都不會出現(xiàn)在這篇文章里,這篇文章就說一些那些我們不怎么使用的,動態(tài)引入css樣式的方法;
靜態(tài)樣式引入前面說過外聯(lián)樣式,內(nèi)聯(lián)樣式和行內(nèi)樣式,所謂外聯(lián)樣式,即樣式文件是一個多帶帶的css文件,通過link標(biāo)簽引入;而內(nèi)聯(lián)樣式,是一種存在于html文件中,但與頁面結(jié)構(gòu)元素分離的,他們都是以存在于style標(biāo)簽中;而行內(nèi)樣式,即存在于某一個標(biāo)簽中,他們只對當(dāng)前元素有效;說那么多,一張圖勝過千言萬語;
無圖說鬼話,有圖說人話。是不是一下全看懂了,快夸我。樣式引入方式的不同,也注定了他們作用的范圍不同,外聯(lián)能作用域多個html文件的多個htm頁面的多個dom節(jié)點(diǎn),兩個多個;內(nèi)聯(lián)只能作用于單個html頁面的多個dom節(jié)點(diǎn);而行內(nèi)嘛,就沒多個了,就只能作用單個頁面的樣式屬性所在的dom節(jié)點(diǎn)。
其實(shí),HTML文件靜態(tài)樣式引入,只要是一個前端,應(yīng)該都明白,所以這篇文章,重點(diǎn)是要說動態(tài)樣式的引入,說一些不常見當(dāng)可能很適用的方法;
行內(nèi)樣式看下面一段代碼:
var triangle = document.createElement("label"); triangle.style.width = "0"; triangle.style.height= "0"; triangle.style.position="absolute"; triangle.style.left ="50%"; triangle.style.top ="99%"; triangle.style.marginLeft = "-5px"; triangle.style.borderLeft = "5px solid transparent"; triangle.style.borderRight = "5px solid transparent"; triangle.style.borderTop= "5px solid white"; triangle.style.borderTopColor = style.backgroundColor; label.appendChild(triangle);
這樣的寫法應(yīng)該很常見吧,創(chuàng)建一個元素(當(dāng)然你也可以獲取一個元素),然后使用js代碼為其動態(tài)添加樣式,有可能你會問,這屬性一個一個寫,為啥不能直接對象,比如下面這樣:
triangle.style ={ width:"0", height:"0", position:"absolute" }
注意哈,不行哈,這是絕對不行的,重要的事情重點(diǎn)標(biāo)注,那如果我想以對象的方式為元素添加樣式呢?有,方法還不止一種(操作HTML的樣式類屬性方法):
triangle.style ="width:0;height:0;position:absolute;"(不推薦)
triangle.style.cssText ="width:0;height:0;position:absolute;"(推薦)
首先將上面的樣式屬性事先寫在一個樣式class里,比如
.triangle{width:0;height:0;position:absolute;},然后在js操作中,只需一句triangle.classList.add(".triangle"),動態(tài)為元素添加一個樣式類
(極力推薦)
這里說一個重點(diǎn),易錯點(diǎn),使用dom.style為元素設(shè)置其浮動樣式時,不可用dom.style.float = "left",為什么,因?yàn)閒loat在css中是關(guān)鍵詞,要設(shè)置其浮動屬性,非IE瀏覽器得使用cssFloat(),而IE使用styleFloat,我走過的坑,但愿你不要再跳下去;
內(nèi)聯(lián)樣式雖然上面我們極力推薦第3種來添加類樣式為元素添加樣式,但在一些插件的引入的時候,我們在引入其js的時候,還得相應(yīng)的引入其css,比如下面這樣:
是不是覺得有點(diǎn)煩,我個人寫插件比較喜歡別人使用時,只需要一個文件就達(dá)到目的,而無需多在頁面增加一次請求,所以這怎么做呢?
那就是樣式的動態(tài)引入,如果你所寫的插件只涉及到少許的樣式操作,像我寫的解決Echarts單軸雷達(dá)輪播那個插件,那用上面提到的直接操作行內(nèi)樣式就夠了;但是如果涉及到大片的樣式和插件樣式動態(tài)變換,那么還是引入樣式類比較簡便,與上面截圖不一樣的是,我們是將樣式寫在插件的JS中,然后插件被調(diào)用時,動態(tài)注入我們的樣式類,具體操作如下:
仔細(xì)看看,可以發(fā)現(xiàn),sytleStr其實(shí)就是我們通常css文件中定義的那些樣式字符串,然后動態(tài)創(chuàng)建了一個sytle標(biāo)簽(設(shè)置其type很重要),并將樣式字符串通過字符串節(jié)點(diǎn)的形式注入到標(biāo)簽中,最后將這個標(biāo)簽添加到被引用js所關(guān)聯(lián)的html文件head頭部,所形成的效果就是下面這樣:
這樣寫的好處就是,別人在使用你的插件時,無需多去引用你的css文件,這樣看起來比較簡潔,當(dāng)然有些利弊也需要你權(quán)衡,比如維護(hù)你插件樣式時,同直接在css樣式文件中修改,這樣的形式會顯得稍微麻煩一些;
其實(shí)與上面的內(nèi)聯(lián)樣式動態(tài)引入相比,外聯(lián)樣式的動態(tài)引入,相信被更多的人熟知。具體步驟就是,創(chuàng)建link標(biāo)簽,設(shè)置type屬性,設(shè)置其href,然后添加到html文件當(dāng)中;像下面這樣:
可以看到html文件中有一個id為dynamicCreation的Link標(biāo)簽,而其關(guān)聯(lián)的就是我們想為其添加的css文件。
以上三種動態(tài)樣式注入,不同的使用場景,各有利弊,至于你想用哪一種,需要你自己權(quán)衡,睡覺去啦。。。。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/112704.html
摘要:中是這樣定義的屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么,可以理解為內(nèi)聯(lián)元素沒有盒模型,其高度由內(nèi)容決定。 白話:即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后,這是自己寫的第四篇CSS相關(guān)的文章,文章絕大部分是自己工作總結(jié)得來,另一部分是平日sf回答的與面試中向面試官交流學(xué)到的,都是一...
摘要:絕對底部前端掘金來自國外的設(shè)計達(dá)人,純,可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達(dá)人,純CSS,可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時,底部位于窗口最下面。當(dāng)改變窗口高度時,不會出現(xiàn)重疊問題。甚至,創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...
摘要:歡迎來我的個人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動 歡迎來我的個人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
閱讀 2148·2021-10-14 09:43
閱讀 2206·2019-08-30 15:55
閱讀 738·2019-08-30 14:23
閱讀 2030·2019-08-30 13:21
閱讀 1246·2019-08-30 12:50
閱讀 2210·2019-08-29 18:46
閱讀 2292·2019-08-29 17:28
閱讀 2375·2019-08-29 17:21