Jquery中的DOM操作 (九.css-DOM操作)

最新推荐文章于 2021-11-23 20:08:41 发布

张大仙是个妖怪

最新推荐文章于 2021-11-23 20:08:41 发布

阅读量504

点赞数

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery 操作DOM节点 DOM对象

本文链接：https://blog.csdn.net/NDKHBWH/article/details/60766086

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏

css-dom技术就是读取和设置style对象的各种属性.

1.css()获取,设置,批量设置,元素的样式属性

$("p").css("color")//获取p元素的样式颜色

$("p").css("color","red"))//设置p元素的样式颜色

$("p").css({"fontSize":"30px","backgroundColor":"#888888"})//设置p元素的字体大小和背景颜色

(a).设置半透明

$("p").css("opacity","0.5"))

(b).$(element).css("height")与$(element).height()的区别

前者获取的是样式设置的高度,后者获取的是元素在页面的实际高度与样式设置无关

2.offset()方法

获取元素在当前视窗的相对偏移,其中返回的对象包含top和left属性,其只对可见元素有效

3.position()方法

获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,其中返回的对象包含top和left属性

4.scrollTop方法和scrollLeft()方法

获取滚动条距离顶端的距离和距离左侧的距离,放入参数,控制滚动条到指定位置

  $(function(){
      //获取<p>元素的color
      $("input:eq(0)").click(function(){
			alert(  $("p").css("color") );
	  });
      //设置<p>元素的color
	  $("input:eq(1)").click(function(){
			 $("p").css("color","red")
	  });
      //设置<p>元素的fontSize和backgroundColor
	  $("input:eq(2)").click(function(){
			 $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
	  });    
	  //获取<p>元素的高度
	  $("input:eq(3)").click(function(){
			  alert( $("p").height() );
	  });  
	  //获取<p>元素的宽度
	  $("input:eq(4)").click(function(){
			  alert( $("p").width() );
	  });   

	    //获取<p>元素的高度
	  $("input:eq(5)").click(function(){
			  $("p").height("100px");
	  });  
	  //获取<p>元素的宽度
	  $("input:eq(6)").click(function(){
			  $("p").width("400px");
	  }); 
	  //获取<p>元素的的左边距和上边距
	  $("input:eq(7)").click(function(){
			  var offset = $("p").offset();
			  var left = offset.left;
			  var top =  offset.top;
		      alert("left:"+left+";top:"+top);
	  });  
  });

<body>
    <input type="button" value="获取p元素的color"/>
	<input type="button" value="设置p元素的color"/>
	<input type="button" value="设置p元素的fontSize和backgroundColor"/>
	<input type="button" value="获取p元素的高度"/>
	<input type="button" value="获取p元素的宽度"/>
	<input type="button" value="设置p元素的高度"/>
	<input type="button" value="设置p元素的宽度"/>
	<input type="button" value="获取p元素的的左边距和上边距"/>


	<p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
	<ul>
	  <li title='苹果'>苹果</li>
	  <li title='橘子'>橘子</li>
	  <li title='菠萝'>菠萝</li>
	</ul>
</body>