jQuery CSS 操作 - css() 方法
实例
设置 <p> 元素的颜色:
$(".btn1").click(function(){$("p").css("color","red");
});
亲自试一试
定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
语法 1
返回第一个匹配元素的样式属性。
$(selector).css(name)
name 参数可以包含任何字符串类型的 CSS 属性名。比如 "color":
取得第一个段落的 color 样式属性的值:
$("p").css("color")
;
亲自试一试
语法 2
设置所有匹配的元素中样式属性的值。
$(selector).css(name,value)
将所有段落的颜色设为红色:
$("p").css("color","red")
;
亲自试一试
参数 | 描述 |
---|---|
name |
必需。规定 CSS 属性的名称。 该参数可以包含任何字符串类型的 CSS 属性名。比如 "color"。 如果只设置该参数,则该方法会返回第一个匹配元素的 CSS 属性的当前值。 |
value |
可选。规定 CSS 属性的值。 该参数可包含任何字符串类型的 CSS 属性值。比如 "red"。 该参数只能与 name 参数一起使用。如果设置了 name 和 value 参数,则该方法将为所有匹配的元素设置指定的 CSS 属性和值。 如果该参数的值是数字,则转换为像素值(除了 font-weight, line-height, opacity, z-index and zoom)。 如果设置了空字符串值,则从元素中删除样式属性。 |
语法 3
设置所有匹配的元素中样式属性的值。
$(selector).css(name,function(index,value))
此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。
逐渐增加 div 的宽度:
$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;});
});
亲自试一试
语法 4
$(selector).css({properties})
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
$("p").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});
亲自试一试
jQuery提供css()
的方法来实现嵌入式改变元素样式,css()
方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:
$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'
如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()
方法。示例如下:
var divcss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。
另外jQuery提供的css()
方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:
$("#61dh a").css("color")
//和第一个例子相似,但是这里我们只传递一个参数(样式属性)
最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")
是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()
。值得注意的是,hover()
方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:
$("#61dh a").css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color','#999');
},
function(){
$(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔
你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()
方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出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。注意在分割返回的字符串时,首先判断字符串是否为空。如:
if (name = this.attr("className")) {
return name.split(" ");
}
else {
return [];
}
};
这段代码为JQuery添加了扩展函数getClassNames()用来得到元素的class name数组。
jQuery CSS 操作 - css() 方法相关推荐
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jQuery的操作css的几种方法和位置,尺寸以及scrolltop方法
jQuery操作css jQuery可以通过css方法直接给指定元素查看,更改,添加css样式 <script>$(function () {//jQuery可以通过css方法直接给指定元 ...
- jQuery 属性操作 - toggleClass() 方法
实例 对设置和移除所有 元素的 "main" 类进行切换: $("button").click(function(){$("p").togg ...
- jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- jquery拼接后css样式不生效_JQuery常用选择器以及操作属性和样式的方法介绍
JQuery日常操作有选择器,获取和操作属性,css样式,文本等等,下面是一些常用的操作,代码以图片形式(哈哈,其实还是我懒,大神别喷我,我还是渣渣),就是一些日常的学习笔记 JQuery中的属性选择 ...
- jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- 【JavaLearn】(22)jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
最新文章
- python装饰器学习
- TikTok时代细分需求 牛逼亚马逊运营团队打造新爆款
- 源代码管理-SVN自动更新
- 递归法:递归实现排列型
- golang语言os.Stat()用法及功能
- 深信服桌面云的各种密码
- 面试题---jmeter
- Python学习之Python入门知识(一)
- 计算机考试中的移动,WPSOffice2002中表格的移动方法
- Multitask Learning
- javascript 按下回车键触发input表单的切换(enter键代替tab键功能)
- android免费离线讯飞语音合成
- CAS单点登录:CAS服务端搭建
- ubuntu下mongodb及其可视化工具robomongo安装
- HHT和FFT的对比
- 2.4亿美元刷新国漫融资纪录,资本缘何偏爱快看?
- window 相关dll文件下载
- RedHat RHEL7.2 系统安装详细步骤
- Semaphore学习
- 计算机保存图片找不到桌面,保存的图片在桌面但是找不到。怎么办?
热门文章
- 【数字信号处理】相关函数 ( 能量信号 | 能量信号的互相关函数 | 能量信号的自相关函数 )
- 【数字信号处理】相关系数 ( 相关系数特点 | 完全相关 | 完全无关 | 部分相关 | 取值范围 | 相关信号产生 | 相干信号产生 )
- 【Groovy】json 序列化 ( JsonBuilder 生成器 | 生成带根节点名称的 json 字符串 | 生成不带根节点名称的 json 字符串 )
- 【Groovy】MOP 元对象协议与元编程 ( Expando 动态类 | 创建动态类 | 为动态类增加字段和方法 )
- 【Windows 逆向】OD 调试器工具 ( OD 调试数据时硬件断点对应的关键代码 | 删除硬件端点恢复运行 )
- 【SeeMusic】购买付费版本 ( 进入购买页面 | 购买流程 )
- 【Android 异步操作】线程池 ( 线程池简介 | 线程池初始化方法 | 线程池种类 | AsyncTask 使用线程池示例 )
- 【Android RTMP】RTMPDump 封装 RTMPPacket 数据包 ( 封装 SPS / PPS 数据包 )
- oracle客户端免安装配置、64位机器PL/SQL和VS自带的IIS连接问题
- openstack--glance