javascript/JQ变更CSS样式要怎么弄?我需要点击的时候改变,再次点击又变回原样

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript/JQ变更CSS样式要怎么弄?我需要点击的时候改变,再次点击又变回原样相关的知识,希望对你有一定的参考价值。

$(".more_button").click(function()
$(".more_button").css("background","red")
);
如果我要再次点击的时候变成蓝色,又返回原样 要怎么弄?就是那种点一次红色 再点蓝色一直重复

$(".more_button").toggle(
  function()
  $(".more_button").css("background","red");,
  function()
  $(".more_button").css("background","blue");
);
参考技术A .red 
    background-color: red;

.blue 
    background-color: blue;

<a class="morebuton blue">More...</a>

$('.morebutton').click(function()
    $(this).toggleClass('red');
);


添加默认红色样式,点击的时候,添加或者去掉蓝色样式就可以了。

追问

没效果啊 大神

追答

哦。。 

这里少写了个t

<a class="morebutton blue">More...</a>


另外,声明的时候,要显示的原始颜色类声明在前面,要后面添加的类写到后面,也就是 .red 和.blue 的样式顺序改变一下。

追问

还是没用呀,,无效

jq选择器

<script type="text/javascript">

//基本选择器

//console.log($(‘#wrap‘));

 

//设置单个样式

//$(‘#wrap‘).css(‘background‘,‘red‘);

 

//设置多个样式

//原生css使用连字符-的地方 在JQ使用驼峰命名法

// $(‘#wrap‘).css({

// background:‘red‘,

// border:‘1px solid black‘,

// borderRadius:‘50%‘

// });

 

 

 

 

 

//class选择器

//根据给定的类名匹配元素

// $(‘.topDiv‘).css({

//

// border:‘1px solid green‘,

//

// });

// $(‘.opition‘).css({

// background:‘yellow‘,

// border:‘1px solid red‘,

// marginTop:‘20px‘

//

// });

 

 

 

//element选择器

// $(‘p‘).css({

// borderRadius:‘50%‘,

// border:‘1px solid blue‘

//

// });

 

 

 

 

//*选择器

//选择所有元素

//不举例子

 

 

 

 

//组合选择器

// $(‘p‘ ,.opition‘).css({

// borderRadius:‘50%‘,

// border:‘1px solid blue‘

//

// });

 

 

 

//后代选择器

// $(‘.bottomDiv p‘).css({

// border:‘1px solid #ccc‘

// })

 

 

 

 

//$(“parent>child”) 能够选择子代元素

//$(“parent>child”)//class名为parent下面的子代p标签 子级的子级标签不选  返回集合

 

 

 

//$(“prev+next”) 选择的是同辈元素

//$(‘#li1+.opition‘).css(‘border‘,‘1px solid black‘);

//$(‘.test+p‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

//$(“prev~siblings”) 匹配所有元素选取prev元素之后的所有siblings元素

//$(‘.topDiv~div‘).css(‘border‘,‘1px solid black‘);//.topDiv之后所有的div元素

 

 

 

 

 

//基本过滤选择器

 

 

 

//1.:first 选取第一个元素

//$(‘li:first‘).css(‘border‘,‘1px solid black‘);

 

//2.:last 选取最后一个元素

//$(‘li:last‘).css(‘border‘,‘1px solid black‘);

 

//3.:not(selector) 取出selector之外的元素

//$(‘.opition:not(#li1)‘).css(‘border‘,‘1px solid black‘);

 

//4.:even 匹配所有元素选取编号是偶数的所有元素,编号从0开始

//$(‘.opition:even‘).css(‘border‘,‘1px solid black‘);

 

//5.:odd 匹配所有元素选取编号是奇数的所有元素,编号从0开始

//$(‘.opition:odd‘).css(‘border‘,‘1px solid black‘);

 

//6.:eq(index) 选取索引等于index的元素 index从0开始

//$(‘.opition:eq(2)‘).css(‘border‘,‘1px solid black‘);

 

//7.:gt(index) 选取索引大于index的元素 index从0开始

//$(‘.opition:gt(0)‘).css(‘border‘,‘1px solid black‘);

 

//8.:lt(index) 选取索引小于index的元素 index从0开始 没有负数

//$(‘.opition:gt(2)‘).css(‘border‘,‘1px solid black‘);

 

//9.next() 选取紧邻的下一个同级元素

//$(‘#li1‘).next().css(‘border‘,‘1px solid black‘);

 

//10.prev() 选取紧邻的下一个同级元素

//$(‘.opition:eq(1)‘).prev().css(‘border‘,‘1px solid black‘);

 

//11.contains(text) 选取含有文本内容为text的元素

//$(‘#wrap:contains(‘退出游戏‘)‘).css(‘border‘,‘1px solid black‘);

 

//12.:empty 选取不包含子元素或者文本的空元素

//$(‘#wrap:empty).css(‘border‘,‘1px solid black‘);

 

//13.:has(selector) 选取含有选择器所匹配的元素的元素

//$(‘div:has(ul)‘).css(‘border‘,‘1px solid black‘);

 

//14.:parent 选取含有选择器所匹配的元素的元素

//$(‘p:parent‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

 

 

//属性过滤选择器

//1.$(“div[attr]”)选取拥有属性attr的元素

//$(‘*[class]‘).css(‘border‘,‘1px solid black‘);

 

//2.[attr=value]选取属性值为value的元素

//2.1[attr!=value]选取属性值不为value的元素

//$(‘*[a!=c]‘).css(‘border‘,‘1px solid black‘);

 

//3.[attr^=value]选取属性值以value开始的元素

//$(‘*[a^=b]‘).css(‘border‘,‘1px solid black‘);

 

//4.[attr$=value]选取属性值以value结尾的元素

//$(‘*[a$=b]‘).css(‘border‘,‘1px solid black‘);

 

//5.[attr*=value]选取属性值包含value的元素

//$(‘*[a*=a]‘).css(‘border‘,‘1px solid black‘);

 

//6.[][][] 属性可以组合(筛选条件增多) 满足所有属性选择器的元素

//$(‘*[a=b][id=li1][title=aaa]‘).css(‘border‘,‘1px solid black‘);

 

 

 

 

 

 

//子元素选择器

//1.:nth-child(index/even/odd) 选取每个父元素下的第index个或者奇偶元素。index从1开始

//$(‘#list:nth-child(odd)‘).css(‘border‘,‘1px solid black‘);

 

//2.:first-child 选取每个父元素下的第一个元素。

//$(‘#list:first-child‘).css(‘border‘,‘1px solid black‘);

 

//3.:last-child 选取每个父元素下的最后一个元素。

//$(‘#list:last-child‘).css(‘border‘,‘1px solid black‘);

 

//4.:only-child 选取每个父元素下的唯一一个元素(不是唯一一个子元素的不能匹配)。

//$(‘#list:last-child‘).css(‘border‘,‘1px solid black‘);

</script>

以上是关于javascript/JQ变更CSS样式要怎么弄?我需要点击的时候改变,再次点击又变回原样的主要内容,如果未能解决你的问题,请参考以下文章

JS 动态修改CSS 样式方法/全局

jq选择器

HTML/javascript 文本 清除 CSS 样式 代码 等标签 如何编写

JQ如何改样式?

jq怎样获取元素样式的数值

css/javascript 一个div包含两个样式class="div1 div2"用javascript修改其中一个样式的内容