动态获取元素的属性值

最新推荐文章于 2022-11-19 17:20:55 发布

原创最新推荐文章于 2022-11-19 17:20:55 发布 · 859 阅读

0 ·

CC 4.0 BY-SA版权

这里引入相关的4条博客，与我们讲的实例有关

https://www.haorooms.com/post/jquery_offset_xy

https://www.cnblogs.com/goloving/p/7113567.html

http://www.cnblogs.com/anniey/p/6591079.html

https://blog.youkuaiyun.com/linbooooo1987/article/details/17464725

<script type="text/javascript">
		    $(".check-item").click(function(){
				
				// 给span元素添加同胞节点
				$(this).after("<div class='aa'>Hello</div>");
				// span的堂兄弟元素不添加插入的节点
				$(this).parent().siblings().children("span").siblings().remove();  
				// 获取插入元素的高度
				var h = $(".aa").height();
				// 由于元素高度太小时不美观,额外加高
				var he = h + 30;
				// 设置被点击元素样式
				$(this).css({"background-color":"#b72e29","color":"#fff"});
				$(this).css("margin-bottom",he +"px");
				// 设置被点击元素的堂兄弟样式
				$(this).parent().siblings().children().css({"margin-bottom":"0px"});
				$(this).parent().siblings().children().css({"background-color":"#fff","color":"#666"});	
				
				// 动态计算left的值
				var a = $(this).offset().left;
				var b = $("#check").offset().left;
				var l = $("#check").offset().left - $(this).offset().left;
				$(".aa").css("left",l + "px");
			});

	</script>