javascript 基本知識(二)節點和屬性操作

2021-08-27 18:53:12 字數 1898 閱讀 1697

布局如下:

下面的是通過和css中的樣式定位一樣來定位節點;

如果要獲取非內聯的樣式,比如獲取上述div的寬度

getcomputedstyle 或 currentstyle

使用方法:

var boxid = document.getelementbyid('box');

alert(getcomputedstyle(box).width) 獲得寬度

alert(box.currentstyle.width) 獲得寬度

兩個都獲採樣式,但它們的區別是:getcomputedstyle對一些低版本ie不支援,currentstyle只相容ie。

所以一般都會把它倆結合來寫

demo1:

var obox = document.queryselector('#box');

var w = getstyle( obox , 'backgroundcolor' );

function getstyle( obj , attr )else

};

相容性:上述所有獲取方式中:

getelementsbyclassname(); 不相容ie8及以下

其中按js執行機制的分類又分:靜態方法動態方法

靜態方法:如var boxid =document.getelementbyid('box');

變數boxid的內容並不會隨著所繫結的標籤id改變而改變。boxid.id="otherid",並不會改變boxid內容。

var boxid = document.getelementbyid("box");

alert(boxid.style.backgroundcolor);//彈出red

boxid.id = "otherid";

alert(boxid.style.backgroundcolor);//彈出red

動態方法:是對節點的動態繫結,隨所繫結的屬性變化而變化;是類陣列

var boxclass =document.getelementsbyclassname();

var liclass = document.getelementsbyclassname('liclass');

alert(liclass[0].style.backgroundcolor);//彈出green

liclass[0].classname = "otherclass";

alert(liclass[0].style.backgroundcolor);//報錯

上訴報錯是因為class是動態繫結的,當class變化的時候,變數liclass也會發生變化;

動態繫結的好處是可以根據需要而改變需要的樣式;上述class改變後,就可以成功隱藏目標li標籤了。

var boxid = document.getelementbyid("box");

//獲取屬性值

var aa = boxid.getattribute('defined');

alert(aa);//彈出 me

//設定屬性值

boxid.setattribute('defined','you');

其設定值的時候,如果該屬性名沒有。則新增該屬性並設定值

//刪除屬性

boxid.removeattribute('defined');

上述對標籤屬性的操作,一般是用來操作自定義屬性。

javascript基本知識

多型 指同一操作操作在不同物件上,可以產生不用的解釋和不同的執行結果。例 var makesound function animal else if animal instanceof chilken var duck function var chicken function makesound ...

javascript基本知識整理三

全域性變數 定義在外邊的變數 若沒有用var宣告,則當這行賦值執行,則就將他認為是全域性變數。區域性變數 在函式內部裡宣告的變數,只能在該函式裡有效。bom物件 window物件的方法 prompt alert confirm close open settimeout setinterval cl...

javascript基本知識整理四

dom操作 使用getelement系列方法實現dom元素的查詢和定位 使用core dom標準操作實現節點的增刪該查 dom?通過dom可以動態改變文件內容 解析文件並生成dom樹 通過標準介面 程式語言改變文件內容 訪問指定節點的方法 getelementbyid getelementsbyna...