jquery:css样式的操作

不用太多的解释，直接上代码吧。也不是那么难
下面省去了width的类似操作，还有scrolltop的操作
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div style=" width:100px;margin: 10px;background-color: yellow;padding: 10px;height:100px;overflow: scroll;"><span style="width: 400px;height:80px;display: block;"></span></div>
		<button class="set_color">set_color</button> <button class="get_color">get_color</button>
		<button class="set_height">set_height</button> <button class="get_height">get_height</button>
		<button class="set_inner_height">set_inner_height</button>
		<button class="set_outter_height">set_outter_height</button>
		<button class="get_inner_height">get_inner_height</button>
		<button class="get_outter_height">get_outter_height</button>
		<button class="position">position</button>
		<button class="offset">offset</button>
		<button class="get_scroll_left">get_scroll_left</button>
		<button class="set_scroll_left">set_scroll_left</button>

	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		//修改颜色
		$("body").on("click", ".set_color", function() {
			$("div").css("color", "red");
		}); //获取颜色
		$("body").on("click", ".get_color", function() {
			console.log($("div").css("color"));
		});
		//设置高度
		$("body").on("click", ".set_height", function() {
			$("div").height("200px");
		});
		//设置高度
		$("body").on("click", ".get_height", function() {
			console.log($("div").height());
		});
		//设置内高度
		$("body").on("click", ".set_inner_height", function() {
			$("div").innerHeight("200");
		});
		//设置外高度
		$("body").on("click", ".set_outter_height", function() {
			$("div").outerHeight("200");
		});
		//获取内高度
		$("body").on("click", ".get_inner_height", function() {
			console.log($("div").innerHeight());
		});
		//获取外高度
		$("body").on("click", ".get_outter_height", function() {
			console.log($("div").outerHeight());
		});
		//获取外高度
		$("body").on("click", ".position", function() {
			console.log($("div").position());
		});
		//获取相对于document的位移
		$("body").on("click", ".offset", function() {
			console.log($("div").offset());
		});
		//获取元素内水平滚动条的位置
		$("body").on("click", ".get_scroll_left", function() {
			console.log($("div").scrollLeft());
		});
		//设置元素内水平滚动条的位置
		$("body").on("click", ".set_scroll_left", function() {
			$("div").scrollLeft(100 * 100);
		});
	</script>

</html>
jquery:css样式的操作

猜你喜欢
