查看DOM對象的style樣式,attributes屬性,children


 // 在不同的瀏覽器查看各種屬性,樣式。如果不知道哪個對象的屬性樣式怎么寫,可以在控制台輸出 style attributes
//   所有的屬性樣式都會出現
// 此外還可以檢查某個屬性在不同瀏覽器是否支持,是否需要加廠商前綴
總而言之,檢驗瀏覽器是否支持某個對象 或 屬性 ,

  不支持全部返回 undefined,

  支持 屬性 / 樣式 都返回 [空字符串]   對象則 相應類型,具體如下:

  console.log( domObj.style['xxx'] )      //支持  返回 [空字符串] , 不支持 返回 undefined

  console.log( domObj.attributes['xxx'] )      //支持  返回 [空字符串] , 不支持 返回 undefined

  console.log( typeof  domObj )       //支持  返回 相應數據類型, 不支持 返回 undefined

  不能直接輸出未定義的對象,否則直接報錯。


1,console.log(document.body.style);//查看某個對象的所有樣式

如:console.log(document.querySelector('a').style);//查看a對象的所有樣式

  console.log(document.body.style['transition']);// 在某個瀏覽器中查看是否支持某個樣式,

    如果支持,返回值:[空字符串]        如果不支持,則返回:undefined

    即:不存在的對象,直接報錯;不存在的屬性,返回 undefined,樣式也是DOM的一種屬性,所以我們設置屬性時,一定記得如下賦值:

             引用類型聲明(對象):  var  obj = null ,  var arr = null , var obj = {}

       基本數據類型聲明:   var  num = 0;     var  str = '';

2,console.log(document.body.attributes);//查看某個對象的屬性

如:console.log(document.querySelector('a').attributes); //查看 a 對象的所有屬性

///  不存在的對象,直接報錯  ;  不存在的屬性,返回undefined  ,可以使用以下方式驗證瀏覽器是否支持該屬性。

  console.log(document.querySelector('a').attributes['href']);  //返回   href = "";   支持的瀏覽器返回 [空字符串]

  console.log(document.querySelector('a').attributes['hrefss']);  //返回 undefined; 不存在的屬性返回未定義

  console.log(abc);     //不存在的對象  直接報錯

 

3,使用 typeof 判斷瀏覽器是否支持某個對象

  支持返回相應類型,不支持則返回 undefined

   //不存在的對象直接輸出就會報錯,所以不適用該方式編碼: console.log(abc);

  console.log(typeof abc); //不存在的對象,返回類型是:undefined,支持則則返回相應對象

       console.log(typeof 'aa');//返回類型:string

       console.log(typeof 67);//返回類型:number

  console.log(typeof {});//返回類型:object

  console.log(typeof document.querySelector('a')); //返回類型:object


 //如果要查看body對象的屬性,使用控制台輸出,可以直接使用父元素打印obj.children在控制台顯示所有的子元素
 //並且找到body,繼續點擊就可以看到body的屬性了,其他元素同理都是在控制台查看
 console.log(document.children);
 
 //在火狐是輸出對象的屬性,在谷歌是輸出整個對象
 console.log(document.querySelector('body'));

 

=====================================

在 谷歌 歐朋瀏覽器中可以查看各種方法:

1,打開控制台

2,點擊眼睛

3,在Expression(表達式)中輸入表達式

  如:input,就可以看到關於input的所有方法,支持模糊匹配。

==================================

以下是在火狐瀏覽器中查看各種方法:

1,打開控制台

2,點擊控制台右上角的三個點----點擊設置

3,找到默認的開發者工具----------勾選DOM即可

4,點擊控制台中的 DOM面板-------在過濾輸入框中輸入方法名

  如:transition 即可,支持模糊匹配

圖一:               圖二: 

圖三:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM