jquery css style operation

	<!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(){
	// Set the CSS box
	$('button:eq(0)').click(function(){
	$('#box').css({"textAlign": "center", "lineHeight":'500px', 'background-color':'lime','color':'pink'});
	})
	// Get the box font size
	$('button:eq(1)').click(function(){
	alert($('#box').css('font-size'));
	})
	// set the box content width is 300
	$('button:eq(2)').click(function(){
	$('#box').width(345)
	})
	// set the box's contents height of 300
	$('button:eq(3)').click(function(){
	$('#box').height(345)
	})
	// Get the width and height of the contents of the box
	$('button:eq(4)').click(function(){
	alert ( 'box of width and height are the contents:' + $ ( '# box') width () + ',' + $ ( '# box') height ()..);
	})
	// Get the width of the box content + the margin width
	$('button:eq(5)').click(function(){
	alert($('#box').innerWidth());
	})
	// Get the width of the box content + the margin width side width +
	$('button:eq(6)').click(function(){
	alert($('#box').outerWidth());
	})
	// Get the width of the box content within the margin width + + + Margin width edge width
	$('button:eq(7)').click(function(){
	alert($('#box').outerWidth(true));
	})
	// Get the width and height of the browser window
	$('button:eq(8)').click(function(){
	alert ( 'Get the width and height of the browser window:' + $ (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>

jquery css style operation

Guess you like