当前位置:  编程技术>WEB前端

jQuery CSS()方法改变现有的CSS样式

    来源: 互联网  发布时间:2014-08-25

    本文导语:  jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','...

jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜色,可以这样编写代码:

$("#61dh a").css('color','#123456'); 
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'

如果需要改变多个样式属性,可先定义属性变量,然后直接赋值给css()方法。

var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);

上述代码先定义了一个CSS样式属性变量“mycss”,类似于建立一个外部CSS文件,之后通过css()方法,把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以查看某个元素的css属性值。例如查看链接的颜色,代码如下:

$("#61dh a").css("color")

你会发现,这与第一个例子相似,但是这里只传递一个参数(样式属性)。

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色),需要用到jQuery事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover()方法的两个函数使用用逗号分隔

或许聪明的你已经注意到这种方法称不上简洁,呵呵,其实jQuery hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。


    
 
 

您可能感兴趣的文章:

  • jquery 设置文本框、密码框获得焦点时的样式
  • jQuery样式插件 jqTransform
  • textarea显示成label的样式 jquery实例
  • JQuery如何为元素添加样式
  • jquery获取样式中background-color颜色值
  • jquery 获取dom固定元素 添加样式的简单实例
  • jquery css方法改变css样式用法介绍
  • 浅析JQuery UI Dialog的样式设置问题
  • jQuery操作元素css样式的三种方法
  • JQuery中操作Css样式的方法
  • jquery操作css样式表文件的方法详解
  • jQuery操作元素css样式三种方法示例
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • Jquery 修改class样式的代码示例
  • jquery 动态添加、删除class样式的方法
  • JQuery结合CSS操作打印样式的方法
  • jquery css类用法(添加、修改与删除css)
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • jQuery图片自动放大插件 Greyscale Hover Effect w/ CSS & jQuery
  • jquery控制css的display属性(显示与隐藏)
  • jQuery Multi Level horizontal CSS Menu
  • jQuery设置CSS属性(示例)
  • jquery控制css display属性(控制元素显示与隐藏)
  • jQuery Multi Level CSS Menu
  • jQuery - css() 方法示例详解
  • jQuery 设置 CSS 属性示例介绍
  • Jquery css方法的例子
  • jQuery加载或调用CSS文件的例子
  • jquery控制css元素的display(显示与隐藏)属性
  • jQuery修改CSS伪元素属性的方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery检验实例-改变错误提示信息的位置
  • jquery 选择块与改变属性值的实现方法
  • JQuery文本改变触发事件如聚焦事件、失焦事件
  • jquery改变tr背景色的示例代码
  • jquery更换文章内容与改变字体大小的实现代码
  • Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
  • jquery异步请求并改变页面内容的实例分析
  • jquery动态改变onclick属性导致失效的问题解决方法
  • jQuery动态改变图片显示大小(示例代码)
  • jquery $("#variable") 循环改变variable的值示例
  • jquery动态改变form属性提交表单
  • 用jquery随意改变div任意属性的名称与值
  • jQuery动态改变图片显示大小(修改版)的实现思路及代码
  • 鼠标滑过导航条改变背景图的jquery实现代码
  • JQuery 实时改变网页字体大小的代码
  • jquery简单实现鼠标经过导航条改变背景图
  • JQuery 动态改变字体颜色的实现代码
  • jquery改变disabled的boolean状态的三种方法
  • jquery改变disabled状态的几种方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • jQuery Multi Level CSS Menu iis7站长之家
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3