3-5 尺寸设值
本节编程练习不计算学习进度，请电脑登录imooc.com操作

尺寸设值

当调用.width(value)方法的时候，这个“value”参数可以是一个字符串（数字加单位）或者是一个数字。如果这个“value”参数只提供一个数字，jQuery会自动加上单位px。如果只提供一个字符串，任何有效的CSS尺寸都可以为宽度赋值（就像100px, 50%, 或者 auto）。注意在现代浏览器中，CSS宽度属性不包含padding, border, 或者 margin。除非box-sizing CSS属性被使用。

如果没有给定明确的单位（像'em' 或者 '%'），那么默认情况下“px”会被直接添加上去（也理解为“px”是默认单位）。

注意.width('value')设置的容器宽度是根据CSS box-sizing属性来定的, 将这个属性值改成border-box将造成这个函数改变成获取这个容器的outerWidth替换原来的内容宽度。

总的来说设值要比取值简单多了，可以直接用style这个接口直接操作，直接注意的就是单位的转化数字需要加上px，还有box-sizing的处理。

 

任务

index.html 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. 	<script src="http://code.jquery.com/jquery-latest.js"></script>
  6. 	<title>jQuery.width</title>
  7. 	<style type="text/css">
  8. 		div{
  9. 			width: 100px;
  10. 			height: 100px;
  11. 		}
  12. 	</style>
  13. </head>
  14. <body>
  15.  
  16. <div style="background:red;border:20px solid #ccc;">DIV</div>
  17.  
  18. <button id="test1">设值</button>
  19.  
  20. <ul></ul>
  21.  
  22. <script type="text/javascript">
  23.  
  24. var div = document.querySelectorAll('div')[0]
  25.  
  26. $('#test1').click(function(){
  27. 	show('之前'+ $(div).width())	
  28. 	div.style['width'] = '500px'
  29. 	show('之后'+ div.style['width'])
  30. })
  31.  
  32. function show(data){
  33. 	$('ul').append('<li>'+ data +'</li>')
  34. }
  35.  
  36. </script>
  37. </body>
  38. </html>
下一节