問個問題 希望 高手 解答下 萬分感謝啊
有 高手 解釋下么 offsetWdith和 style.width 之間的區(qū)別么 ?為什么老師的 單張圖片 ?var imgWidth=imgs[0].offsetWidth ?而不是用imgs[0].style.width呢？？？可以 告訴我下么 新手 謝謝啊
2 回答
舉報
0/150
提交
取消
有 高手 解釋下么 offsetWdith和 style.width 之間的區(qū)別么 ?為什么老師的 單張圖片 ?var imgWidth=imgs[0].offsetWidth ?而不是用imgs[0].style.width呢？？？可以 告訴我下么 新手 謝謝啊
2015-10-12
舉報
2015-10-12
樓上回答不完善。offsetWidth獲取的是元素盒子模型的寬度，
即：offsetWidth = width + padding left + padding right + border left + border right；
? ? ? ? style.width = width。
例子（借用樓上的例子1）：
<!DOCTYPE?html> <html> <head> <title>?new?document?</title>?? <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>??? </head>? <body>? ??<div?style="width:100px;height:100px;padding:10px;border:5px?solid?#000;"></div> <script?type="text/javascript"> ??alert(document.getElementsByTagName("div")[0].offsetWidth)????//130 ??alert(document.getElementsByTagName("div")[0].style.width)????//100px </script> </body> </html>同理，offsetHeight 和 style.height 的區(qū)別是一樣的。
2015-10-12
offsetWdith和 style.width都是獲取元素的寬度，但是還是有區(qū)別的。
offsetWidth在任何情況再都可以獲取元素的寬度，但是style.width只有在元素有內聯(lián)樣式且樣式包含寬度的時候才可以獲取到寬度的值，而且前者輸出是不帶單位的，后者輸出是帶單位的。
例子1：
<!DOCTYPE?html> <html> <head> <title>?new?document?</title>?? <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>??? </head>? <body>? ??<div?style="width:100px;height:100px;"></div> <script?type="text/javascript"> ??alert(document.getElementsByTagName("div")[0].offsetWidth)????//100 ??alert(document.getElementsByTagName("div")[0].style.width)????//100px </script> </body> </html>例子2：
<!DOCTYPE?html> <html> <head> <title>?new?document?</title>?? <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>??? <style> div{width:100px;height:100px;} </style> </head>? <body>? ??<div></div> <script?type="text/javascript"> ??alert(document.getElementsByTagName("div")[0].offsetWidth)????//100 ??alert(document.getElementsByTagName("div")[0].style.width)????//輸出為空 </script> </body> </html>希望對你有幫助！