jquery轻松操作CSS样式
$(this).click(function(){
if($(this).hasClass(“zxx_fri_on”)){
$(this).removeClass(“zxx_fri_on”);
}else{
$(this).addClass(“zxx_fri_on”);
}
return false;
});
添加或去除元素集合的class name
1. 使用addClass()方法
addClass(names) 添加names指定的一个或多个class name给wrapped set。如果有多个name,使用空格分开,总之names是个字符串。
返回原来的wrapped set以进行JQuery链式操作。
注意:如果在添加的样式声明中有重复声明,谁的优先级更高呢? 请参阅这里看CSS的权重分配。
2. 使用removeClass()方法
removeClass(names) 去除names指定的一个或多个class name。如果有多个names,使用空格分开。
返回原来的wrapped set以进行JQuery链式操作。
3. 使用toggleClass()方法
toggleClass(name) 这次只能有一个class name作为参数。如果该class已经存在,则去除之;如果没有则添加之。
返回原来的wrapped set以进行JQuery链式操作。
获取或设置CSS样式
1. 使用css(name, value)方法
这个方法用来设置css样式给wrapped set中的每一个元素。
name就是css样式的属性名称;
value可以是(string|number|function) ,类似于上节提
到的attr(name, value)方法,value如果是function,则传给function的参数时元素在wrappsed
set中的序号,function内部使用this指向正在被操作的Javascript DOM元素(够强)。function的返回值就是要设置的
css属性的值了。
比如:
$('div').css('font-size', function(n){
return (n+1)+'em';
});
将页面中div按照出现的顺序依次加大字体大小。
2. 使用css(properties)方法
参数properties是一个object,其中定义了class属性名称和值对。这样一次就可以进行多个css属性的设置了。
返回的依然是wrapped set以方便JQuery链式操作。
如:
$('div:eq(0)').css({
'font-size' : '2em',
'color' : '#cc00ff'
});
比较郁闷的是,这个Object的属性名必须用引号引起来作为一个字符串,否则是不能被浏览器识别的,attr()类似的方法就无需这样。
同样Object中也可以包含function,如:
$('div').css({
'font-size': function(n)
{
return (n+2) + 'em';
}
});
3. 使用css(name)方法
这个方法返回由name指定的css 属性的值,返回的值是一个字符串,因此有些情况需要转换一下。这个方法只能返回wrapped set中第一个元素的指定css属性值。
如:$('#firstDiv').css('font-size')可能返回一个字符串 '16PX'。
顺便说一下,如果想得到指定元素的class名称(如果指定的话),使用Javascript标准方法,如:
$('#firstDiv')[0].className
4.使用width()和height()方法
1)不带参数的width()和height()方法返回wrapped set中第一个元素的宽和高,这里直接返回一个number(单位为px),无需从字符串转换了。
2) 带参数的witdh(value)和height(value) 给wrapped set中每个元素指定由value表示的宽高。返回wrapped set。
value的值可以是number或者是字符串。如果是number则单位是px。
如:$('div').width(600); //600px
$('div') .width('400mm'); //400mm
hasClass(name)方法
判断wrapped set中是否有任何一个元素包含了name指定的class name, name也可以是一个用空格分开的多个class names组成的字符串。返回true | false;
注意:class name和class property name的区别:
-- class name指定义style的css名称,一个style定义会包含很多class property.比如定义一个叫 ownStyle的样式。
-- class property name指css规范中的css属性名。比如 font-size,color等等。
如果想得到一个元素的所有class names,使用attr('className')方法或者Javascript DOM属性className。注意在分割返回的字符串时,首先判断字符串是否为空。如:
jquery轻松操作CSS样式的更多相关文章
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- JQuery中操作Css样式
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
随机推荐
- 捕获异常的两种方式Exception
1.抛出异常:让调用此方法的代码去管 public static void GetFile() throws Exception{} package com.throwable; import jav ...
- IT人才最容易犯的17个错误--人生警言
转载 记得刚参加工作时(那是97年),中国的IT刚刚兴起,那时,作为一个IT人士是一件很光荣的事,而那时的我正在做电气和电子相关的工作.99年第一次跳槽,进入了IT行业做软件开发.至今,中国的IT已经 ...
- jsunit测试
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/ba ...
- SAP财务常用数据源概览
一. 0FI_GL_10总分类账:领先分类账余额 Delta Update : AIED After Images Marked for Deletion via Extractor (FI-GL/A ...
- hdu 2056
ps: - -惭愧...是套用一个大神的计算方法来做的.....下面是代码 代码: #include "stdio.h"#include "stdlib.h&quo ...
- Java中的接口与抽象类
抽象类很简单,就是多了个abstract关键字,可以有(也可以没有)只声明不定义的方法.不能实例化该类. 接口比较特殊: 无论你加不加public,接口中声明的方法都是public的,还有无论你加不加 ...
- (spring-第11回【IoC基础篇】)BeanWrapper--实例化Bean的第四大利器
重复是理解和记忆的最好方法.在讲实例化Bean的每个步骤之前,我都会先复习一下Bean实例化的整个过程: 结合图片我们回顾一下具体的过程: ResourceLoader加载配置信息, 由BeanDef ...
- RTL2832U+R820电视棒跟踪飞机轨迹教程(ADS-B)
Ubuntu 14.04.3 amd64 apt-get install git apt--dev 安装rtl-sdr git clone git://git.osmocom.org/rtl-sdr. ...
- 【Tsinghua OJ】循环移位(Cycle)
Description Cycle shifting refers to following operation on the sting. Moving first letter to the en ...
- ASP.NET之Ajax系列(三)
我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...