jquery操作css样式 - 码农教程

	<!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