// 在不同的瀏覽器查看各種屬性,樣式。如果不知道哪個對象的屬性樣式怎么寫,可以在控制台輸出 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 即可,支持模糊匹配
圖一: 圖二:
圖三: