jq 操作元素样式

短命女 2021-07-24 14:35 414阅读 0赞

**返回css样式内容**
    
    	对象数组.css("样式名")
    			function t2()
    		{
    			var showdiv=$("#showdiv");
    			alert(showdiv.css("width"));
    		}
    		js.style方法不能获取写在css代码域内的样式
    		
    **增加/修改样式**
    		数值可以不加px，如要加需要'400px' 括起来
    		
    	对象数组.css("样式名","修改样式")
    			function t1()
    		{
    			var showdiv=$("#showdiv");
    			//操作样式
    			showdiv.css("background-color","red");
    		}
    		
    	在原值基础上修改	
    		对象数组.css('样式名','+=200');    在原来基础上增加200px
    		
    
    **增加多个样式**
    	数值可以不加px，如要加需要'400px' 括起来
    	
    	对象数组.css({"样式名":"样式值","样式名":"样式值","样式名":"样式值"...})
    			function t3()
    		{
    			var div=$("#div01");
    			div.css({"border":"solid 2px orange","width":"300px","height":"200px"});
    		}
    		
    **通过类选择器添加样式**
    
    	对象数组.addClass("类选择器名")
    			function t4()
    		{
    			var div=$("#div01");
    			div.addClass("common");
    		}
    		
    **移除类选择器样式**
    
    	对象数组.removeClass("类选择器名")
    			function t5()
    		{
    			var div=$("#div01");
    			div.removeClass("common");
    		}

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>jq 操作元素样式</title>
    		<script type="text/javascript" charset="utf-8" src="js/jquery-3.4.1.js"></script>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				var showdiv=$("#showdiv");
    				//操作样式
    				showdiv.css("background-color","red");
    			}
    			function t2()
    			{ 
    				var showdiv=$("#showdiv");
    				alert(showdiv.css("width"));
    			}
    			function t3()
    			{ 
    				var div=$("#div01");
    				div.css({ "border":"solid 2px orange","width":"300px","height":"200px"});
    			}
    			function t4()
    			{ 
    				var div=$("#div01");
    				div.addClass("common");
    			}
    			function t5()
    			{ 
    				var div=$("#div01");
    				div.removeClass("common");
    			}
    		</script>
    		<style type="text/css">
    			#showdiv{ 
    				width:100px;
    				height:200px;
    				border:solid 2px;
    			}
    			.common{ 
    				width:100px;
    				height:200px;
    				border:solid 2px;
    				background-color: purple;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="修改样式" onclick="t1()"/>
    		<input type="button"  value="返回样式" onclick="t2()"/>
    		<input type="button"  value="操作多个样式" onclick="t3()"/>
    		<input type="button" value="操作类选择器"  onclick="t4()"/>
    		<input type="button"  value="移除类选择器样式" onclick="t5()" />
    		<hr/>
    		<div id="showdiv" >
    			
    		</div>
    		<div id="div01" class="common">
    			
    			
    		</div>
    	</body>
    </html>