سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> #MyBox{ background-color: #f2f2f2; text-align: left; margin: auto; width: 300px; height: 200px; padding: 10px; border: 5px solid black; overflow:auto; } .MyContent{ width: 1000px; } </style> </head> <body style="text-align:center;"> <p dir="rtl"><b>اندازه ای که در خروجی نمایش داده میشود، شامل اندازه Padding و Border می باشد.</b></p> <button onclick="Get_Size();">کلیک کنید</button> <div id="MyBox"> <div class="MyContent"> <ul> <li>Width = 300px</li> <li>Height = 200px</li> <li>Padding (Top) = 10px</li> <li>Padding (Right) = 10px</li> <li>Padding (bottom) = 10px</li> <li>Padding (Left) = 10px</li> <li>Border (Top) = 5px</li> <li>Border (Right) = 5px</li> <li>Border (bottom) = 5px</li> <li>Border (Left) = 5px</li> </ul> </div> </div> <p id="Result" dir="rtl"></p> <script> function Get_Size() { var MyBox , Result , MySize; MyBox = document.getElementById("MyBox"); Result = document.getElementById("Result"); MySize = "Offset-Height = " + MyBox.offsetHeight + "px" + "<br>" + "Offset-Width = " + MyBox.offsetWidth + "px"; Result.innerHTML = MySize; } </script> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
