如何利用jquery来向一个元素中添加和移除css类

如题所述

Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类,例如:
1.$(“#para1”).addClass('highlight');添加一个“highlight”css 类给id为para1的元素。
2.$(‘#para1’).removeClass(‘'highlight');从id为para1的元素中移出一个‘highlight’css类。

具体实例代码如下:
<html>
<head>
<styletype="text/css">
.highlight {
background:green;
}
</style>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery add / remove css class example</h1>

<pid="para1">This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>

<buttonid="addClass">Add highlight</button>
<buttonid="removeClass">Remove highlight</button>

<scripttype="text/javascript">

$("#addClass").click(function () {

$('#para1').addClass('highlight');

});

$("#removeClass").click(function () {

$('#para1').removeClass('highlight');

});

</script>
</body>
</html>

初始的效果:

点击 add highlight 后的效果图:

点击 remove highlight 后的效果图:
温馨提示:内容为网友见解,仅供参考
无其他回答

jquery 点击事件点击元素添加和移除class
可以使用:$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。为了直观性的看到结果,首先在css样式中,针对class选择该元素,之后添加相应的样式。接下来,就给该button按钮添加一个点击事件,让它能过自由切换。对该点击事件添加js函数。运行...

怎样用jq在某个样式中删除某一条样式
使用jquery删除css属性,一般使用jquery删除标签属性方法removeAttr('style');如果你的css是写在class中的,你需要将class移除,可以使用移除class方法,removeClass();

JS脚本:jquery 如何动态添加、删除class样式方法介绍
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:复制代码代码如下:1 $("p").removeClass("high"); \/\/移除p...

jquery的addClass和removeClass使用方法是什么?
.addClass( className ),className为一个String字符串,为指定元素添加这个classname的类.addClass( function(index, currentClass) ),这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合...

jQuery给元素添加样式的方法详解
10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:toggle:动态效果为从右至左。横向动作。slideToggle:动态效果从下至上。竖向动作。比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。('input').attr("readonly",true)\/\/将input元素设置为readonly...

jquery 点击增加样式,点击移除样式
jquery 点击增加样式,点击移除样式,代码如下:("li").click(function(){ (this).toggleClass("enable");(this).siblings().removeClass("enable");})

jquery动态赋值的方法有哪些?
, "#FFF");("p").css({ "font-size": "16px","color": "#333"});使用 .addClass() 或 .removeClass() 方法给元素添加或移除类,例如:javascript ("div").addClass("active");("p").removeClass("hidden");这些方法可根据具体场景进行组合使用,灵活实现 jQuery 的动态赋值功能。

jquery的children和removeAttr方法
1、语法分别如下:.children(selector)selector字符串值,包含匹配元素的选择器表达式。(selector).removeAttr(attribute)attribute必需,从指定元素中移除的属性。2、示例:("div").children(".selected").css("color", "blue"); \/\/ 找到类名为 "selected" 的所有 div 的子元素,并将其设置为...

jquery删除div(jquery删除div下所有标签)
2、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。3、新建HTML文件。引入jquery.min.js文件。创建div和按钮并添加class样式。接下来需要创建css样式。创建js点击事件。当点击按钮移除div元素。点击按钮效果如图所示。4、添加删除Div,有很多种方法。下面具一个简单的方法。jquery如何...

jquery怎么设置class
需要准备的材料分别有:电脑、html编辑器、浏览器。1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。2、在index.html中的标签,输入jquery代码:$('input').css('width', '250px');。3、浏览器运行index.html页面,此时输入框的css样式的宽度被成功设置250px。

相似回答