CSS属性设置与动态调整示例-优快云博客

本文链接：https://blog.youkuaiyun.com/vincentguo_/article/details/30281561

依然是答题的代码，留个脚印

http://bbs.youkuaiyun.com/topics/390810364

<html>
	<head>
		<meta charset=utf-8>
		<script src="jquery-1.11.1.min.js"type="text/javascript">
		</script>
		<script type="text/javascript">
		$(document).ready(function() {
			areaResize();
			$(window).resize(function() {
				areaResize();
			});
		});
		function areaResize() {
			var sHeight = self.innerHeight;
			var sWidth = self.innerWidth;
			$(".bg").css({
				"height": sHeight-200,
				"width": sWidth
			});
			$(".header").css({
				"height":" 100px",
				"width": sWidth
			});
						$(".footer").css({
				"height":" 100px",
				"width": sWidth
			});
		};
		</script>
		<style type="text/css">
		.bg{
		background-color: red;
		overflow: auto;
		}
		.header{
			background-color: blue;
		}
		.footer{
			background-color: black;
		}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="bg">
			设置 CSS 属性
			设置所有匹配元素的指定 CSS 属性。
			$(selector).css(name,value)
			参数	描述
			name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。
			value
			可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。
			如果设置了空字符串值，则从元素中删除指定属性。
			实例
			将所有段落的颜色设为红色：
			$("p").css("color","red");
			亲自试一试
			使用函数来设置 CSS 属性
			设置所有匹配的元素中样式属性的值。
			此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。
			$(selector).css(name,function(index,value))
			参数	描述
			name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。
			function(index,value)
			规定返回 CSS 属性新值的函数。
			index - 可选。接受选择器的 index 位置
			oldvalue - 可选。接受 CSS 属性的当前值。
			实例 1
			将所有段落的颜色设为红色：
			$("button").click(function(){
			$("p").css("color",function(){return "red";});
			});
		</div>
		<div class="footer"></div>
	</body>
</html>

随窗口自动伸缩