《DOM程式設計藝術》中CSS DOM的總結(一)

2021-09-19 04:46:43 字數 944 閱讀 2244

前言:前面是純總結,後面實現了乙個用dom改變樣式的demo。

-------------------開始-------------------------

html文件中每個元素節點都有乙個style屬性,style屬性包含著元素的樣式,查詢這個這個屬性將會返回乙個物件,節點對應的樣式都存放在這個style屬性裡。

乙個demo:可以彈出彈窗,返回標籤應用的css樣式

an example of a paragraph

style屬性只能返回內嵌樣式,只有把css style樣式插入到標記裡,才可以用dom style屬性去查詢那些資訊。

demo說明:作者首先給出了一段html,有兩個

第一段寫點什麼呢?

我來講一段故事:從前有座山,山里乙個廟...

別走啊!!!最精彩的還在後面,旁邊有一座尼姑庵...

你聽我講,慢慢聽我講,這個故事很精彩

首先封裝乙個styleheadersiblings函式,獲取所有的h1標籤,然後呼叫nextsibling方法獲取下乙個節點,但是nextsibling方法返回的是所有節點而不只是元素節點,包括h1中的text了文字,所以就需要函式getnextelement來進行判斷,直到獲取到下乙個元素節點為止返回,然後執行改變樣式的操作

styleheadersiblings函式:

//需求:改變h1標籤緊跟著後面節點元素的樣式,首先要封裝乙個函式,獲取所有的h1元素

//headers[i].nextsibling獲取的是

第一段寫點什麼呢?

我來講一段故事:從前有座山,山里乙個廟...

別走啊!!!最精彩的還在後面,旁邊有一座尼姑庵...

你聽我講,慢慢聽我講,這個故事很精彩

《DOM程式設計藝術》中CSS DOM的總結(二)

前言 接上篇,本篇有兩個內容 乙個是demo 當滑鼠hover到 的一行上時這行 字型加粗。好了,廢話少說,開始!嚴肅的分割線 需求 建立乙個 當滑鼠hover到一行上時,改變這行中字型的樣式,滑鼠移走恢復原樣。這是乙個 when where 9月9日 北京路25號人民廣場 10月9日 南京路28號...

DOM程式設計藝術(動畫)

1 實現方式 gif flash css3 js2 三要素 物件dom物件 屬性 定時器 setinterval settimeout requestanimationframe setinterval var intervalid setinterval func,delay param1,par...

DOM程式設計藝術 position屬性

position屬性的合法值有static fixed relative和absolue四種。static是position屬性的預設值,意思是有關元素將按照它們在標記裡出現的先後順序出現在瀏覽器視窗裡。relative的含義魚static相似,區別是position屬性等於relative的元素還...