js知識整理 六 DOM操作元素樣式

2021-10-07 08:54:17 字數 1091 閱讀 9852



.box1


<


/style>


"div1"


>


hello div 


<


/div>


"onchangestyle()"


> 節點樣式的修改 <


/button>


function


onchangestyle()


{// 拿到節點 


var divnode = document.


getelementbyid


("div1");


<


/script>
方法一:
// 修改classname 屬性 對應節點的class 的類選擇器 


divnode.classname =


"box1"


;
方法二:
// 通過attribute 修改class屬性值 也可以


divnode.


setattribute


("class"


,"box1"


);
方法三:

上面的2種方式 修改 節點的樣式思路是修改 class 屬性 ,第三種 通過 節點的style屬性 修改樣式 style會對應每個css 有屬性 ,多個css 屬性單詞用 駝峰命名法 , 這裡寫法是div標籤行間 引入style 樣式

divnode.style.backgroundcolor =


"skyblue"


;  divnode.style.color =


"red"


;  divnode.style.fontsize =


"20px"


;
style 屬性的修改 和 classname 有區別嗎?
1 style 的修改是在元素的行間新增style屬性  


2. style的修改需要改很多css 的樣式 (稍微複雜)


3.classname 修改class 的屬性      


4. classname修改 比 style的簡單

js操作DOM元素

document.createelement document.getelementbyid 返回對擁有指定 id 的第乙個物件的引用。document.getelementbyname 返回帶有指定名稱的物件集合。document.getelementbytagname 返回帶有指定標籤名的物件集...

JS之DOM操作元素

獲得id名稱是inp1物件節點 var inp1 document.getelementbyid inp1 方式一 獲得元素的屬性 var ty inp1.type var va inp1.value var na inp1.name 操作元素的屬性 inp1.type button inp1.va...

JS知識整理隨筆（6） DOM

語法 ele.stylename stylevalue 功能 設定ele元素的css樣式 說明困了 困了 不刷了 下次見dom 語法 ele.getattribute attribute 功能 獲取ele元素的attribute屬性 說明 語法 ele.setattribute attribute ...