| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #box{ | |
| width: 500px; | |
| height: 500px; | |
| margin: 0 auto; | |
| text-align: center; | |
| font-size: 50px; | |
| } | |
| </style> | |
| <script src=‘js/jquery-1.11.3.min.js‘></script> | |
| <script> | |
| $(function(){ | |
| // 设置box的CSS | |
| $(‘button:eq(0)‘).click(function(){ | |
| $(‘#box‘).css({"textAlign": "center", "lineHeight":‘500px‘, ‘background-color‘:‘lime‘,‘color‘:‘pink‘}); | |
| }) | |
| // 获取box的字体大小 | |
| $(‘button:eq(1)‘).click(function(){ | |
| alert($(‘#box‘).css(‘font-size‘)); | |
| }) | |
| //设置box的内容宽度为300 | |
| $(‘button:eq(2)‘).click(function(){ | |
| $(‘#box‘).width(345) | |
| }) | |
| //设置box的内容高度为300 | |
| $(‘button:eq(3)‘).click(function(){ | |
| $(‘#box‘).height(345) | |
| }) | |
| //获取box的内容宽度与高度 | |
| $(‘button:eq(4)‘).click(function(){ | |
| alert(‘box的内容宽度与高度分别为：‘+$(‘#box‘).width()+‘ , ‘+$(‘#box‘).height()); | |
| }) | |
| // 获取box的内容宽度+内边距宽度 | |
| $(‘button:eq(5)‘).click(function(){ | |
| alert($(‘#box‘).innerWidth()); | |
| }) | |
| //获取box的内容宽度+内边距宽度+边宽 | |
| $(‘button:eq(6)‘).click(function(){ | |
| alert($(‘#box‘).outerWidth()); | |
| }) | |
| // 获取box的内容宽度+内边距宽度+边宽+外边距宽度 | |
| $(‘button:eq(7)‘).click(function(){ | |
| alert($(‘#box‘).outerWidth(true)); | |
| }) | |
| //获取浏览器窗口的宽高 | |
| $(‘button:eq(8)‘).click(function(){ | |
| alert(‘获取浏览器窗口的宽高:‘+$(window).width()+‘,‘+$(window).height()); | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <button>设置box的css</button> | |
| <button>获取box的字体大小</button> | |
| <button>设置box的内容宽度为345</button> | |
| <button>设置box的内容高度为345</button> | |
| <button>获取box的内容的宽度和高度</button> | |
| <button>获取box的内容宽度+内边距宽度</button> | |
| <button>获取box的内容宽度+内边距宽度+边宽</button> | |
| <button>获取box的内容宽度+内边距宽度+边宽+外边距宽度</button> | |
| <button>获取浏览器窗口的宽高</button> | |
| <div id=‘box‘>我是文字,你好 !</div> | |
| </body> | |
| </html> |
原文：https://www.cnblogs.com/zykzyk/p/11390833.html