jQuery之dom操作(属性、样式操作)

最新推荐文章于 2022-08-20 22:32:00 发布

龙腾四海365

最新推荐文章于 2022-08-20 22:32:00 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/u011637069/article/details/50187041

jQuery 专栏收录该内容

23 篇文章

订阅专栏

jQuery之dom操作(属性、样式操作)

1.属性操作

读取：attr('');

设置：attr('','');

设置多个：attr({'':'','':''});

删除：removeAttr('');

2.样式操作

获取和设置：attr("class","");/attr("style","");

追加：addClass('');

移除：removeClass('')/removeClass('s1 s2')

/removeClass()--删除所有

切换样式：toggleClass,有该样式就删除，没有就添加。

是否有某个样式：hasClass('');

读取css('')

设置css('');/css({'':'','':''});

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <style type="text/css">
    	.s1{
    		font-size:60px;
    	}
    	.s2{
    		font-size:30px;
    		color:red;
    	}
    	.s3{
    		font-style:italic;
    	}
    </style>
    <script type="text/javascript">
    	$(function(){
        	$('#b1').click(function(){
            	//设置样式
				//$('#d1').attr('class','s1');
				//$('#d1').attr('style','color:red;');
				//$('#d1').addClass('s1 s2');

				//追加样式
				//参数必须是一个样式选择器的名字
				$('#d3').addClass('s2');

				//移除样式
				//$('#d3').removeClass('s1');
				//删除所有样式 
				//$('#d3').removeClass();

				//切换样式
				//toggleClass,有该样式就删除，没有就添加。
        		//$('#d4').toggleClass('s3');

        		//是否有某个样式
        		//alert($('#d4').hasClass('s3'));
            });
        });
    </script>
  </head>
  <body style="font-size:30px;">
  	<div id="d2" class="s1 s2">测试代码</div>
  	<div id="d1">hello jQuery</div>
  	<div id="d3" class="s1">追加样式</div>
  	<div id="d4" class="s3">切换样式</div>
  	<input id="b1" type="button" value="样式操作"><br/>
  </body>
</html>