javascript - 封裝函數(shù)，實(shí)現(xiàn)游覽器兼容。
問題描述
<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <title>封裝獲取css屬性</title> <style>h1{ width:300px; height:100px; background-color:red;} </style></head><body> <h1>我是高100px，寬300px的紅色長方形</h1> <script type='text/javascript'>var h1 = document.getElementsByTagName(’h1’)[0];//標(biāo)準(zhǔn)瀏覽器console.log( window.getComputedStyle(h1)[’width’]);console.log( window.getComputedStyle(h1).height);//IE瀏覽器console.log(h1.currentStyle.width);console.log(h1.currentStyle.height);//封裝函數(shù)//ele表示元素，zxc表示屬性functiong abc (ele,zxc){ //第一種 var qwe = window.getComputedStyle( ele ).zxc||ele.current.zxc console.log(qwe); //第二種 if (window.getComputedStyle( ele )){window.getComputedStyle( ele ).zxc }else{ele.current.zxc }} </script></body></html>
這樣封裝對(duì)不對(duì)？
問題解答
回答1：你要先判斷函數(shù)存不存在
function getStyle(elem, attr) { let style; if (window.getComputedStyle) { // 標(biāo)準(zhǔn)// 防止 elem === documentlet view = (elem.ownerDocument || elem).defaultView;if (!view || !view.opener) { view = window;}style = window.getComputedStyle(elem)[attr]; } else if (document.documentElement.currentStyle) { // IEstyle = elem.currentStyle[attr]; } elem = null; return style;}
網(wǎng)公網(wǎng)安備