JQueryDOM之CSS操作

最新推荐文章于 2023-06-26 13:49:59 发布

雷蒙96

最新推荐文章于 2023-06-26 13:49:59 发布

阅读量283

点赞数

分类专栏： jQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_41298721/article/details/87896457

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS操作

主要介绍的方法：css()，对于高度和宽度的操作，则简单说一下height()、width()

css(): 用于获取、设置元素的一个或多个属性 $(selector).css()

例：

$("p").css("color","red")：该示例用于设置元素的颜色属性为红色;

$("p").css("color")：该示例用于获得元素的color样式值

$("p").css({"font-size":"30px","backgroundColor","#888888"})：该示例用于设置元素的多个样式

height()、width()： jQuery提供的操作高度和宽度的方法，可用于获取和设置宽度和高度

获取 <p>元素的宽度 $("p").width();（高度同）

设置<p>元素的高度 $("p").height("100px");（宽度同）

案例源码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
  <script>
  	$(function(){
  		
  		$("#btn1").click(function(){
  			//设置id为div1的元素的高度为100px,宽度为100px,背景颜色为红色
  			$("#div1").css({"width":"100px","height":"100px","background":"red"});
  			//获取id为div1的元素背景颜色
  	    	$("#div1").css("background-color");
  		})
  		
  		$("#btn2").click(function(){
  			// 设置p的宽度为80px
  			$("p").width("80px");
  		})
  		
  		$("#btn3").click(function(){
  			alert($("p").height());
  		})
  		
  		$("#btn4").click(function(){
  			alert($("#div1").css("background-color"));
  		})
  		
  		
  	})
  </script>
    
</head>
<body>
<div id="div1">
	<p style="height: 30px;background: blue">我是段落</p>
	
</div>
<button id="btn1">设置div的样式(宽度100px,高度100px,颜色：红色)</button>
<button id="btn2">设置标签p的宽度(80px)</button>
<button id="btn3">获取标签p的高度(80px)</button>
<button id="btn4">获取div的背景颜色</button>
</body>
</html>

雷蒙96

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQueryDOM之CSS操作

CSS操作主要介绍的方法：css()，对于高度和宽度的操作，则简单说一下height()、width()css(): 用于获取、设置元素的一个或多个属性 $(selector).css()例： $("p").css("color","red")：该示例用于设置元素的颜色属性为红色; $("p").css("color")：该示例用于...
复制链接

扫一扫