操作js的樣式

2022-09-04 12:48:08 字數 1209 閱讀 1312

1.js操作css樣式

div.style.width=」100px」.在div標籤內我們新增了乙個style屬性,並設定

了width值。這種寫法會給標籤帶來大量的style屬性,跟實際專案是不符。

我們沒有讓css和html分離。

所以如果是為了獲取css樣式

window.getcomputedstyle() 獲取經過計算機計算的所有屬性

就是只要渲染出來的都是經過計算的。

getcomputedstyle()第乙個引數是當前元素,第二個一般我們寫null

並且這個方法是唯讀,

ie6-8 不支援這個用法,ie的是用currentstyle

2.trycatch(error){} 不報錯執行try裡面的**塊,報錯執行catch裡面的**塊。

前提條件是報錯,如果不是報錯不能使用

var csss;

trycatch(e)

console.log(csss)

總結js解決相容的方法

1. ||

var dd=document.documentelement.clientwidth||document.body.clientwidth

2. if()else{}

if(window.getcomputedstyle)else

console.log(csss)

3. try{} catch(err){}

必須在報錯的條件下,和if  else比較效能上比較差,不在萬不得以的情況下不使用

唯讀 可寫

唯讀: 只能獲取不能修改

可寫:可以修改的

null和undefined的區別

null和undefined都表示沒有值

null 是這個東西是天生存在的但是沒給值。

比如var aa=document.getelementbyid("aa")

console.log(aa.parentnode.parentnode.parentnode.parentnode) null

undefined 這個東西壓根就不存在的是人為定義的並且沒賦值。

var a;undefined

div.aa undefined

元素節點的樹狀圖

document>documentelement>body>tagname

offsetleft/offsettop 結合運動

滾動輪播

js對樣式的操作

本文有 對某個事件的來回操作實現對css樣式的來回修改 比如實現hover效果 box 魔降風雲變 1 1.1 沒有js的時候 1.獲取事件源物件 var box document.getelementbyid box 2.繫結事件 box.onmouseover function 滑鼠經過圖,讓圖...

JS操作css樣式

操作內聯樣式 通過js修改元素的樣式 通過style屬性設定的樣式都是內聯樣式,而內聯樣式具有較高的優先順序,所以通過js修改的樣式往往會立即顯示 讀取元素的樣式 獲取元素當前顯示的樣式 currentstyle 語法 元素.currentstyle.樣式名 getcomputedstyle 該方法...

js操作css樣式

1.js操作css樣式 例如 div style width 100px 就是在div標籤內我們新增乙個style屬性,並設定了width值,這種寫法會給標籤帶來大量的style屬性,跟實際專案是不符合的,我們沒有讓css和html分離。所以如果是為了獲取css樣式 用 window getcomp...