本文目录一览:
- 1、js动态添加或删除class,怎么在返回上一页的时候保留?
- 2、jquery 点击事件点击元素添加和移除class
- 3、原生javascript 增加 删除 class
- 4、jquery的addClass和removeClass使用方法是什么?
- 5、如何利用JS实现在li中添加或删除class属性
js动态添加或删除class,怎么在返回上一页的时候保留?
你可以把动态添加的样式利用cookie来保存,然后打开页面的时候再从cookie取出来然后addClass。删除也一样,removeClass后再把该样式从cookie移除。
也可以用LocalStorage来储存,可实现永久保存(除非删除浏览器),不过这个有浏览器兼容性,老的浏览器不支持。
如果想改变后其他人也能看到改变后的样式,那就只能修改css或html文件了。
jquery 点击事件点击元素添加和移除class
可以使用:$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。
为了直观性的看到结果,首先在css样式中,针对class选择该元素,之后添加相应的样式。
接下来,就给该button按钮添加一个点击事件,让它能过自由切换。
对该点击事件添加js函数。
运行后的结果为:
拓展资料:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
原生javascript 增加 删除 class
// dom 元素处理
// 获取dom属性
function getAttr( attr )
{
return this.getAttribute( attr );
}
// 设置属性
function setAttr( attr, val )
{
this.setAttribute( attr, val );
return this;
};
// 编辑元素class
function editClass( mode, data )
{
var cls = getAttr.call( this, "class" ) || '';
var arr = cls.split( /\s+/ );
switch( mode )
{
case "add":
return setAttr.call( this, "class", cls + " " + data );
break;
case "remove":
for( var i = 0; i arr.length; i++ )
{
if( arr[ i ] == data )
{
arr.splice( i, 1 );
}
};
var cls = arr.join( " " );
cls = cls.replace( /^\s|\s$/g, "" );
// cls = cls == "" ? null : cls;
return setAttr.call( this, "class", cls );
break;
default:
console.log( "EditClass mode error!" );
return this;
break;
}
}
// 添加class
function addClass( cls )
{
return editClass.call( this, "add", cls );
}
// 删除class
function removeClass( cls )
{
return editClass.call( this, "remove", cls );
}
// 我写的这个调用起来和普通的调用方式不一样, 需要用call
// 比如
dom = document.getElementById('domid');
addClass.call(dom, 'newclass'); // 给dom添加名为‘newclass’的classname
至于toggle没用过,不清楚是什么效果, 不过我想结合add和remove应该已经能做出所有效果了
jquery的addClass和removeClass使用方法是什么?
addClass
描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串,为指定元素添加这个classname的类
.addClass( function(index, currentClass) ),这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。
removeClass
描述: 移除集合中每个匹配元素上一个,多个或全部样式。
.removeClass( [className ] ),每个匹配元素移除的一个或多个用空格隔开的样式名。
.removeClass( function(index, class) ),这个函数,返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
如何利用JS实现在li中添加或删除class属性
可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除,attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数,其工作方式也有所差异,可以使用removeclass来删除class属性。
工具原料:编辑器、浏览器
1、为li添加class属性:
为某个li元素添加class=“special”的属性
$('li').attr('class','special');
2、删除class属性:
$("li").removeClass("special");
});