jQuery修改操作css属性实现方法
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍。
css()方法在使用上具有多样性,我们先来了解css()方法基本知识。
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");下面的例子将返回首个匹配元素的 background-color 值:
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值:
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置 background-color 和 font-size:
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
如我们要改变链接颜色,我们可以使用下面的代码:
$("#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的方法来改变鼠标划过的链接样式。
还有一些常用的如addclass,hasclass我们也来看看
名称
|
说明
|
实例
|
addClass( classes )
|
为每个匹配的元素添加指定的类名。
|
为匹配的元素加上 'selected' 类:
$("p").addClass("selected"); |
hasClass( class )
|
判断包装集中是否至少有一个元素应用了指定的CSS类
|
$("p").hasClass("selected");
|
removeClass( [classes] )
|
从所有匹配的元素中删除全部或者指定的类。
|
从匹配的元素中删除 'selected' 类:
$("p").removeClass("selected"); |
toggleClass( class )
|
如果存在(不存在)就删除(添加)一个类。
|
为匹配的元素切换 'selected' 类:
$("p").toggleClass("selected"); |
toggleClass( class, switch )
|
当switch是true时添加类,
当switch是false时删除类 |
每三次点击切换高亮样式:
var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); }); |
名称
|
说明
|
实例
|
css( name )
|
访问第一个匹配元素的样式属性。
|
取得第一个段落的color样式属性的值:
$("p").css("color");
|
css( properties )
|
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
|
将所有段落的字体颜色设为红色并且背景为蓝色:
$("p").css({ color: "#ff0011", background: "blue" }); |
css( name, value )
|
在所有匹配的元素中,设置一个样式属性的值。
数字将自动转化为像素值
|
将所有段落字体设为红色:
$("p").css("color","red");
|
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样式的方法
jquery操作css样式的方法(设置和获取)
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- JQuery修改对象的属性值
JQuery修改对象的属性值 用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
- jquery轻松操作CSS样式
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
随机推荐
- oracle 绿色版本 instantclient 使用说明
1,将instantclient直接放到D盘根目录 2,注册表修改 3,点击工具>>首选项, 在Oracle主目录名中输入“D:\instantclient_10_2\”,在OCI库中输入 ...
- 用上新的电脑装上了VS2013了
今天老魏终于把配置好的电脑拿回来了,16G的内存,I7 4770CPU.这回啊,老魏终于可以舍弃我的本本了,装上了SQL Server,虚拟机等等运行高内存的程序,感觉就是爽.明天老魏就可以用VS20 ...
- Technical diagrams for SharePoint 2013
sharepoint2013技术图表 http://technet.microsoft.com/zh-cn/library/cc263199.aspx SharePoint 2013 的可下载内容 h ...
- Android Studio 单刷《第一行代码》系列 05 —— Fragment 基础
前情提要(Previously) 本系列将使用 Android Studio 将<第一行代码>(书中讲解案例使用Eclipse)刷一遍,旨在为想入坑 Android 开发,并选择 Andr ...
- O2O模式
O2O即Online To Offline(在线离线/线上到线下) 是指将线下的商务机会与互联网结合,让互联网成为线下交易的前台,这个概念最早来源于美国.O2O的概念非常广 泛,既可涉及到线上,又可涉 ...
- iOS 网络编程
iOS 开发中所需的数据基本都是来自网络,网络数据请求是 iOS 编程中必不可少的,应该熟练掌握网络请求. 网络请求方式有 :GET , POST , PUT ,DELETE 等,其中常用的就是 GE ...
- 现在不使用ZeroClipboard我们也能实现复制功能(转)
现在不使用ZeroClipboard我们也能实现 首先,我们保证页面结构不变,但不在引入ZeroClipboard插件: 1 <input type="text" name= ...
- iOS socket编程 第三方库 AsyncSocket(GCDAsyncSocket)
Socket描述了一个IP.端口对.它简化了程序员的操作,知道对方的IP以及PORT就可以给对方发送消息,再由服务器端来处理发送的这些消息.所以,Socket一定包含了通信的双发,即客户端(Clien ...
- C++模板使用介绍
1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而言,C++的检查机制能通过函数参数的不同及所属类的不同.正确的调用重载函数.例如,为求两个数的最大值,我们定义MAX()函数 ...
- SaaS系列介绍之七: SaaS模式分析(下)
1 SaaS模式下的质量管理 质量管理是从事SaaS事业的企业管理的重要课题,质量管理的职能是质量方针.质量目标和质量指标的制定和贯彻实施,中心目标是促进产品质量.提高客户满意度. 软件质量要素包含以 ...