A-A+

JQuery为元素添加样式的详解

2016年01月13日 前端设计 暂无评论 阅读 8 views 次

最简单的做法就是直接给元素绑定样式了,但有是像注册验证这一块需要由js来实现给元素添加样式,那么要如何来实现呢,具体如下。

列举下对css样式操作的方法:

1、.css(“样式”):获得样式值,比如$(“input”).css(“color”) 获得input中字体的颜色

2、.css(“样式”,”value”):为样式赋值,如$(“input”).css(“color”,”red”);

3、.addClass(“样式类1,样式类2,样式类3″):可以添加多个定义好的样式类

4、.hasClass(“样式类类”):判断是否存在该样式

5、.toggleClass(“样式类”):如果存在(不存在)就切换(删除)样式

6、.toggleClass(“样式类”,swith):如果swith为false,则删除样式,如果swith为true,则切换成该类

7、removeClass(“样式类”):移除样式类

8、.css({样式名:”value”,样式名:”value”,样式名:”value”}):可以多次添加样式

例子:

1. addClass() - 添加CSS类

$("#target").addClass("newClass");

#target 指的是需要添加样式的元素的ID

newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");

#target 指的是需要移除CSS类的元素的ID

oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。

$("#target").toggleClass("newClass")

如果ID为“target”的元素已经定义了CSS样式,它将被移除;

反之,CSS类”newClass“将被赋给该ID。

例子:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <script type="text/javascript" src="../jquery.js"></script>  
  6. <script type="text/javascript">  
  7.  $(document).ready(function() {  
  8.   $("#link").click(function(event) {  
  9.    alert("不再转到jquery.com");  
  10.    event.preventDefault();  
  11.   });  
  12.   $("#upSize").click(function(event) {  
  13.    $("#link").addClass("link-size-up");  
  14.   });  
  15.   $("#downSize").click(function(event) {  
  16.    $("#link").addClass("link-size-down");  
  17.   });  
  18.   $("#changeColor").click(function(event) {  
  19.    $("#link").addClass("link-color-change");  
  20.   });  
  21.   $("#resetColor").click(function(event) {  
  22.    $("#link").addClass("link-color-reset");  
  23.   });  
  24.  });  
  25. </script>  
  26. <title>set your title</title>  
  27. <style type="text/css">  
  28. .link-size-up {  
  29.  font-size: 30px;  
  30. }  
  31. .link-size-down {  
  32.  font-size: 14px;  
  33. }  
  34. .link-color-change {  
  35.  color: #F00;  
  36. }  
  37. .link-color-reset {  
  38.  color: black;  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43. <p><a href="jquery.com" id="link">jquey.com</a>  
  44. </p>  
  45. <p><a href="#" id="upSize">增大字号</a></p>  
  46. <p><a href="#" id="downSize">减少字号</a></p>  
  47. <p><a href="#" id="changeColor">变换颜色</a></p>  
  48. <p><a href="#" id="resetColor">恢复颜色</a></p>  
  49. </body>  
  50. </html>  
标签:

给我留言