• 技术文章 >web前端 >js教程

    jquery怎么删除样式

    青灯夜游青灯夜游2021-11-23 19:16:24原创78

    删除方法:1、用removeAttr()方法,语法“$(元素).removeAttr("属性名")”,属性名可为id、class或style;2、用removeClass()方法,语法“$(元素).removeClass("类名")”。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery删除样式的方法

    方法1:利用removeAttr()方法

    removeAttr() 方法可从被选元素中移除属性。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("h1").removeAttr("id");
    					$("p").removeAttr("style");
    					$("p").removeAttr("class");
    				});
    			});
    		</script>
    		<style>
    			#h1{
    				color: red;
    			}
    			.box{
    				color: #FFC0CB;
    			}
    		</style>
    	</head>
    
    	<body>
    		<h1 id="h1">这是一个标题</h1>
    		<p style="font-size:120%;color:red">这是一个段落。</p>
    		<p class="box">这是另一个段落。</p>
    		<button>删除样式</button>
    	</body>
    </html>

    效果图:

    1.gif

    方法2:利用removeClass()方法

    removeClass() 方法从被选元素移除一个或多个类。

    注释:如果没有规定参数,则该方法将从被选元素中删除所有类。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("p").removeClass();
    					$("div").removeClass("intro");
    				});
    			});
    		</script>
    		<style>
    			.box1 {
    				color: #FFC0CB;
    			}
    
    			.box2 {
    				color: #FFC0CB;
    			}
    
    			.box3 {
    				color: #FFC0CB;
    			}
    
    			.intro {
    				font-size: 120%;
    				color: red;
    			}
    		</style>
    	</head>
    
    	<body>
    		<p class="box1">这是一个段落。</p>
    		<p class="box2">这是一个段落。</p>
    		<p class="box3">这是一个段落。</p>
    		<div class="intro">这是另一个段落。</div><br>
    		<button>删除样式</button>
    	</body>
    </html>

    2.gif

    相关视频教程推荐:jQuery教程(视频)

    以上就是jquery怎么删除样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jquery 删除样式
    上一篇:javascript怎样求圆的面积和周长 下一篇:用jquery可以加样式吗
    VIP会员

    相关文章推荐

    • jquery怎么实现超出部分省略号• jquery怎么清除兄弟元素• jquery怎样判断点击了几次• vue和jquery兼容吗• jquery怎样判断除法有没有余数

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网