JQuery操作html（二）

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

返回指定的 CSS 属性的值，

css("propertyname");

设置指定的 CSS 属性，

css("propertyname","value");

设置多个 CSS 属性，

css({"propertyname":"value","propertyname":"value",...});

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

唯一需要注意的地方，设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}

width() 获取为: 60

innerWidth() 获取值为: 80

outWidth() 获取值为: 100

<html>
	<head>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<meta charset="utf-8">
		<title>鲁迅</title>
		<script type="text/javascript">
			$(document).ready(function() {
				//addClass() - 向被选元素添加一个或多个类(可以选取多个元素)
				$("#addClass").click(function() {
					$("p,b").addClass("blue important");
				});
				//removeClass() - 从被选元素删除一个或多个类
				$("#removeClass").click(function() {
					$("p").removeClass("blue");
				});
				//toggleClass() - 对被选元素进行添加/删除类的切换操作
				$("#toggleClass").click(function() {
					$("p").toggleClass("blue");
				});

				//返回指定的 CSS 属性的值
				$("#getcss").click(function() {
					alert("背景颜色 = " + $("p").css("background-color"));
				});
				//设置指定的 CSS 属性
				$("#setcss").click(function() {
					$("p").css("background-color", "yellow");
				});
				//设置多个 CSS 属性
				$("#setcsss").click(function() {
					$("p").css({
						"background-color": "yellow",
						"font-size": "200%"
					});
				});

			});
		</script>
		<style type="text/css">
			.important {
				font-weight: bold;
				font-size: xx-large;
			}

			.blue {
				color: blue;
			}
		</style>
	</head>
	<body>

		<button id="addClass">addClass</button>
		<button id="removeClass">removeClass</button>
		<button id="toggleClass">toggleClass</button>
		<button id="getcss">返回css值</button>
		<button id="setcss">设置css值</button>
		<button id="setcsss">设置csss值</button>
		<p style="background-color:#ff0000">愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话。</p>

		<p>能做事的做事，能发声的发声，有一分热,发一分光，就令萤火一般，也可以在黑暗里发一点光,不必等候炬火。</p>

		<p>此后如竟没有炬火：我便是唯一的光.</p>

		<p>倘若有了炬火，出了太阳,我们自然心悦诚服的消失，不但毫无不平,而且还要随喜赞美这炬火或太阳；</p>

		<p>因为他照了人类，连我都在内。</p>

		<p>我又愿中国青年都只是向上走，不必理会这冷笑和暗箭。</p>

		<b>文字摘自鲁迅《热风·随感录四十一》</b>

	</body>
</html>
posted @ 2020-12-10 17:05  小安不菜  阅读(62)  评论(0)    收藏  举报