摘要:內(nèi)聯(lián)樣式外聯(lián)樣式樣式屬性,寫(xiě)在外部文件,通過(guò)鏈接導(dǎo)入。內(nèi)聯(lián)樣式注意點(diǎn)樣式的應(yīng)用,采取就近原則,因此一般情況優(yōu)先級(jí)是內(nèi)聯(lián)樣式嵌入樣式外聯(lián)樣式。中有新的方式去查看完整的屬性某元素內(nèi)聯(lián)外聯(lián)嵌入樣式合起來(lái)計(jì)算后的屬性。
訪問(wèn)的style屬性為空?
有時(shí)候,直接通過(guò)某元素的style屬性去查看相關(guān)信息時(shí),會(huì)發(fā)現(xiàn)查看到的是空的屬性。
原因很簡(jiǎn)單,style屬性只能訪問(wèn)內(nèi)聯(lián)樣式,而你把css寫(xiě)在了外部文件。
不是很清楚內(nèi)聯(lián)樣式,可以看下面的解釋?zhuān)?br>內(nèi)聯(lián)樣式:直接加在某個(gè)元素屬性中的樣式。
外聯(lián)樣式
嵌入樣式:樣式的屬性?xún)?nèi)容寫(xiě)在該網(wǎng)頁(yè)代碼中。
內(nèi)聯(lián)樣式
外聯(lián)樣式:樣式屬性,寫(xiě)在外部文件,通過(guò)鏈接導(dǎo)入。
內(nèi)聯(lián)樣式
注意點(diǎn):css樣式的應(yīng)用,采取就近原則,因此一般情況優(yōu)先級(jí)是:內(nèi)聯(lián)樣式>嵌入樣式>外聯(lián)樣式。(但如果外聯(lián)樣式的link語(yǔ)句在嵌入樣式之后,那么外聯(lián)樣式由于離元素更近,優(yōu)先級(jí)就高于嵌入樣式了)
css樣式訪問(wèn)注意點(diǎn)①雖然通過(guò)style屬性,只能訪問(wèn)內(nèi)聯(lián)元素樣式,但我們通常還是利用style屬性來(lái)改變css樣式。
②不建議利用style屬性去查看一個(gè)元素的樣式,因?yàn)槟愫芸赡軣o(wú)法得到正確樣式。Dom2中有新的方式去查看完整的屬性(某元素內(nèi)聯(lián)、外聯(lián)、嵌入樣式合起來(lái)計(jì)算后的屬性)。
方法如下:
function showComputedStyles(){ const myDiv = document.getElementById("myDiv"); //假設(shè)有個(gè)myDiv if(myDiv.currentStyle){ //IE不支持getComputedStyle方法 let computedStyle = myDiv.currentStyle; console.log(computedStyle.backgroundColor); }else{ //非IE瀏覽器可以用getComputedStyle方法 let computedStyle = document.defaultView.getComputedStyle(myDiv,null); console.log(computedStyle.backgroundColor); } }
注意點(diǎn):通過(guò)這樣的方式得到的屬性,都是經(jīng)計(jì)算后的,同時(shí)也是只讀的。但十分建議用這種方式去查看元素的屬性。關(guān)于修改屬性,還是得用style屬性或者setAttribute。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/94248.html
摘要:渲染阻塞在瀏覽器進(jìn)行加載時(shí),其實(shí)是并行加載所有資源。則就叫稱(chēng)為重繪。在回流的時(shí)候,瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效,并重新構(gòu)造這部分渲染樹(shù),完成回流后,瀏覽器會(huì)重新繪制受影響的部分到屏幕中,該過(guò)程成為重繪。 前面有講到當(dāng)用戶(hù)在瀏覽器輸入url之后,經(jīng)過(guò)一系列的過(guò)程,會(huì)最終向服務(wù)器請(qǐng)求到文檔數(shù)據(jù),文檔數(shù)據(jù)請(qǐng)求到之后,瀏覽器會(huì)將這些數(shù)據(jù)傳給瀏覽器渲染引擎,渲染引擎開(kāi)始正式工作了。 構(gòu)建...
摘要:渲染阻塞在瀏覽器進(jìn)行加載時(shí),其實(shí)是并行加載所有資源。則就叫稱(chēng)為重繪。在回流的時(shí)候,瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效,并重新構(gòu)造這部分渲染樹(shù),完成回流后,瀏覽器會(huì)重新繪制受影響的部分到屏幕中,該過(guò)程成為重繪。 前面有講到當(dāng)用戶(hù)在瀏覽器輸入url之后,經(jīng)過(guò)一系列的過(guò)程,會(huì)最終向服務(wù)器請(qǐng)求到文檔數(shù)據(jù),文檔數(shù)據(jù)請(qǐng)求到之后,瀏覽器會(huì)將這些數(shù)據(jù)傳給瀏覽器渲染引擎,渲染引擎開(kāi)始正式工作了。 構(gòu)建...
摘要:渲染阻塞在瀏覽器進(jìn)行加載時(shí),其實(shí)是并行加載所有資源。則就叫稱(chēng)為重繪。在回流的時(shí)候,瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效,并重新構(gòu)造這部分渲染樹(shù),完成回流后,瀏覽器會(huì)重新繪制受影響的部分到屏幕中,該過(guò)程成為重繪。 前面有講到當(dāng)用戶(hù)在瀏覽器輸入url之后,經(jīng)過(guò)一系列的過(guò)程,會(huì)最終向服務(wù)器請(qǐng)求到文檔數(shù)據(jù),文檔數(shù)據(jù)請(qǐng)求到之后,瀏覽器會(huì)將這些數(shù)據(jù)傳給瀏覽器渲染引擎,渲染引擎開(kāi)始正式工作了。 構(gòu)建...
摘要:方法返回的是內(nèi)聯(lián)樣式的聲明內(nèi)容元素屬性名稱(chēng)屬性中對(duì)象提供了屬性返回對(duì)象中對(duì)應(yīng)中所有樣式屬性提供的對(duì)象封裝了所有樣式屬性得到樣式屬性對(duì)應(yīng)的值,字符串類(lèi)型將其轉(zhuǎn)換為類(lèi)型用屬性獲取獲取頁(yè)面的屬性值為的元素直接使用屬性獲取內(nèi)聯(lián)樣式獲取內(nèi)嵌與外聯(lián)樣式 getAttribute()方法 返回的是內(nèi)聯(lián)樣式的聲明內(nèi)容 //元素.getAttribute(屬性名稱(chēng)); var btn=element.g...
閱讀 1361·2021-11-23 09:51
閱讀 3526·2021-09-06 15:00
閱讀 1047·2021-08-16 10:57
閱讀 1432·2019-08-30 12:46
閱讀 986·2019-08-29 12:22
閱讀 1670·2019-08-29 11:07
閱讀 3203·2019-08-26 11:23
閱讀 3042·2019-08-23 15:14