jQuery来了--进行CSS操作的方法(添加/删除类),CSS()方法
来源:互联网 发布:邱少云违背生理学知乎 编辑:程序博客网 时间:2024/05/17 07:06
CSS类
进行CSS操作的方法:
- addClass():向被选元素添加一个或多个类
- removeClass():从被选元素删除一个或多个类
- toggleClass():对被选元素进行添加/删除类的切换操作
- css():设置或返回被选元素的一个或多个样式属性
addClass()方法
作用:向被选元素添加一个或多个类
例.
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("p,div").addClass("haha"); /* $("h1,h2").addClass("blue"); $("div").addClass("haha"); $("p").addClass("blue haha"); //可在addClass()方法中规定多个类 */ }); });</script><style type="text/css"> .blue{ color:blue; } .haha{ font-size:30px; }</style><h1>标题 1</h1><h2>标题 2</h2><p>这是一个段落。</p><p>这是另外一个段落。</p><div>这是一些重要的文本!</div><br><button>为元素添加 class</button>
运行结果:
点击按钮后:
removeClass()方法
作用:从被选元素删除一个或多个类
例.
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); });</script><style type="text/css">.blue{ color:blue; }</style><h1 class="blue">标题 1</h1><h2 class="blue">标题 2</h2><p class="blue">这是一个段落。</p><p>这是另外一个段落。</p><br><button>从元素中移除 class</button>
运行结果:
点击按钮后:
toggleClass()方法
作用:对被选元素进行添加/删除类的切换操作
例.
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); });</script><style type="text/css">.blue{ color:blue; }</style><h1 class="blue">标题 1</h1><h2 class="blue">标题 2</h2><p class="blue">这是一个段落。</p><p>这是另外一个段落。</p><br><button>切换 class</button>
运行结果:
点击按钮后:
css()方法
css()方法作用:设置或返回被选元素的一个或多个样式属性
返回CSS属性
语法:css(“propertyname”);
例.
将返回首个匹配元素的 background-color 值:
<body><script> $(document).ready(function(){ $("button").click(function(){ alert("背景颜色为:"+$("p").css("background-color")); //返回首个匹配元素的属性值 }); });</script><p style="background-color:#ff0000">这是一个段落。</p><p style="background-color:#00ff00">这是一个段落。</p><p style="background-color:#0000ff">这是一个段落。</p><button>返回 p 元素的 background-color </button></body>
运行结果:
点击按钮后:
设置CSS属性
语法:css(“propertyname”,”value”);
例.
为所有匹配元素设置 background-color 值:
<body><script> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow"); //返回首个匹配元素的属性值 }); });</script><p style="background-color:#ff0000">这是一个段落。</p><p style="background-color:#00ff00">这是一个段落。</p><p style="background-color:#0000ff">这是一个段落。</p><button>返回 p 元素的 background-color </button></body>
运行结果:
点击按钮后:
设置多个 CSS 属性
语法:css({“propertyname”:”value”,”propertyname”:”value”,………});
例.
为所有匹配元素设置属性:
<body><script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-weight":"bold"}); }); });</script><p style="background-color:#ff0000">这是一个段落。</p><p style="background-color:#00ff00">这是一个段落。</p><p style="background-color:#0000ff">这是一个段落。</p><p>这是一个段落。</p><button>为 p 元素设置多个样式</button></body>
运行结果:
点击按钮后:
0 0
- jQuery来了--进行CSS操作的方法(添加/删除类),CSS()方法
- jquery的样式操作,类操作(添加 删除 css)
- jQuery CSS 操作 - css() 方法
- jQuery CSS 操作 - css() 方法
- jQuery CSS 操作 - css() 方法
- jQuery css方法操作
- JQuery中操作Css样式的方法
- JQuery中操作Css样式的方法
- JQuery中操作Css样式的方法
- JQuery中操作Css样式的方法
- jQuery操作CSS属性的相关方法
- JQuery中操作Css样式的方法
- JQuery中操作Css样式的方法
- CSS的添加方法
- 添加CSS的方法
- jQuery的css方法
- jQuery的css方法
- jQuery CSS 操作 - offset() 方法
- Oracle 约束的增删
- UVA 1103 Ancient Messages dfs
- ArcGIS Python API获取以及对比landsat数据
- float的影响
- POJ2828 Buy Tickets(线段树,单点更新)
- jQuery来了--进行CSS操作的方法(添加/删除类),CSS()方法
- poj2635(素数表)
- 第八周 bfs
- 二分查找
- HDU1005 Number Sequence
- 基于活动选择问题来分析动态规划和贪心算法
- ffmpeg学习(一)
- Swing中Graphics绘制图片,图片使用随机背景色,随机字符串
- 开发JPA环境搭建