| |
<!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> |
浙公网安备 33010602011771号