计算浏览器垂直滚动条的宽度代码实例
分类:实例代码
通常是没有获取滚动条宽度的需求,但是这里纯粹为了学习javascript知识。
下面就通过代码实例介绍一下如何实现此功能,代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '100px', height: '100px', overflowY: 'scroll' }, prop, scrollbarWidth; for (prop in styles) oP.style[prop] = styles[prop]; document.body.appendChild(oP); scrollbarWidth = oP.offsetWidth - oP.clientWidth; return scrollbarWidth; } window.onload = function () { var odiv = document.getElementById("antzone"); odiv.innerHTML = getScrollbarWidth(); } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的代码可以在div中输出滚动条的宽度,代码非常的简单,更多内容可以参阅从相关阅读。
相关阅读:
(1).document.createElement()可以参阅document.createElement()一章节。
(2).for in语句可以参阅js for in语句一章节。
(3).appendChild()方法可以参阅appendChild()一章节。
(4).offsetWidth可以参阅js offsetWidth一章节。
(5).clientWidth可以参阅clientWidth一章节。
(6).innerHTML 可以参阅innerHTML一章节。
网站出售中,有意者加微信:javadudu