javascript - 封裝函數，實現游覽器兼容。
問題描述
<!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];//標準瀏覽器console.log( window.getComputedStyle(h1)[’width’]);console.log( window.getComputedStyle(h1).height);//IE瀏覽器console.log(h1.currentStyle.width);console.log(h1.currentStyle.height);//封裝函數//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>
這樣封裝對不對？
問題解答
回答1：你要先判斷函數存不存在
function getStyle(elem, attr) { let style; if (window.getComputedStyle) { // 標準// 防止 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;}
網公網安備