`

jQuery 的CSS属性

阅读更多

  CSS属性的设定,  可以用预先定义的 CSS样式,使用$('obj').addClass('cssStyle')/$('obj').removeClass('cssStyle'),(无参数表示删除原来的样式)

 

 可以用

   $('obj').css() 来添加属性

  css 后面的参数相当与map对象,

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删除css属性的简单方法

    有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢?...以上这篇Jquery删除css属性的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    jquery css3进度条加载动画特效

    标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果,即在网页内容加载时显示的进度条。这种特效可以提供用户反馈,表明页面正在加载,并且增加了用户体验的互动...

    jQuery css3打开遮罩图片形状过渡动画效果

    在IT行业中,jQuery和CSS3是两种非常重要的前端技术,它们在网页动态效果和样式设计上发挥着关键作用。本文将深入探讨如何结合jQuery和CSS3实现一个遮罩图片形状过渡动画效果,这是一种常见的交互设计,能提升用户...

    jquery css3曲线特效图.zip

    - 在曲线特效中,CSS3的`border-radius`用于创建圆角,`transform`可以改变元素的形状、大小和位置,`transition`则实现了平滑的属性变化,而`animation`则允许创建复杂的动画序列。 3. **交互式曲线图形**: - ...

    jQuery CSS3导航菜单下划线动画特效

    2. **CSS3过渡(Transition)**:当一个CSS属性从一种值变化到另一种值时,过渡属性可以控制这种变化的速度。在导航菜单中,当用户鼠标悬停或点击链接时,下划线的宽度变化可以通过设置过渡时间和平滑度来实现。 3....

    jquery css 加载插件

    这些CSS文件(如load1.css到load8.css)和JavaScript库(如jQuery)的结合使用,可以创建出各种不同的加载动画,使得页面在处理后台任务时显示一种视觉反馈,告知用户系统正在工作。 首先,jQuery是一个流行的...

    jquery css3仿游戏网站环形菜单代码.rar

    《使用jQuery和CSS3构建游戏风格的环形菜单》 在网页设计中,创新和交互性的元素总能吸引用户的眼球。"jQuery css3右键菜单"是一个独特的设计,它模仿了K社游戏的风格,为网站增添了一种动态且引人入胜的用户体验。...

    jquery css3华丽滚动效果.zip

    2. **CSS3**: CSS3是层叠样式表的最新版本,它引入了许多新的选择器、属性和模块,如边框图像、阴影、渐变、动画和转换等,这些都为网页设计提供了更多的灵活性和创意空间。 3. **jQuery Smoove插件**: 这是一个...

    jQuery CSS3漂亮的tooptip提示框动画特效

    1. **HTML结构**:在HTML文档中,需要为每个需要提示信息的元素添加额外的属性或数据标签,这些标签会被jQuery用来识别并添加提示框内容。 2. **CSS样式**:CSS文件(可能命名为`tooltip.css`)定义了提示框的外观,...

    jQuery css3旅游网鼠标悬停图片文字动画效果

    "jQuery css3旅游网鼠标悬停图片文字动画效果"是一种常见的交互式设计,它结合了jQuery JavaScript库和CSS3的强大功能,为旅游网站的图片展示带来生动的视觉体验。这种效果在用户将鼠标光标悬停在图片上时,会触发一...

    jQuery css() 方法动态修改CSS属性

    其中,jQuery 提供了一个非常实用的方法 —— css(),它使得动态修改 HTML 元素的 CSS 属性变得简单便捷。 使用 jQuery 的 css() 方法可以完成以下几类操作: 1. 读取和设置单个 CSS 属性值 2. 设置多个 CSS 属性...

    jQuery css3人物绘画涂鸦交互动画特效.zip

    jQuery基于css3属性制作酷炫的鼠标移动控制人物彩虹笔绘画交互特效。

    jquery css3属性制作超酷的日历表点击按钮日历表切换

    这个项目标题“jquery css3属性制作超酷的日历表点击按钮日历表切换”涉及到了两个核心技术:jQuery库和CSS3样式,用于实现一个用户友好的日历展示和切换功能。 jQuery是一个强大的JavaScript库,它简化了HTML文档...

    jQuery CSS3数字滚动统计代码.zip

    在"jQuery CSS3数字滚动统计代码"中,核心原理是利用jQuery的动画功能和CSS3的过渡(transition)或动画(animation)属性来创建平滑的数字滚动效果。具体步骤如下: 1. **HTML结构**:首先,我们需要在HTML中创建...

    jquery css3带透明背景登录注册表单代码.rar

    这些图片可以通过CSS的`background-image`属性引用,并在适当的位置显示。 jQuery和CSS3的结合,使得表单不仅可以响应用户的交互,如在输入时实时验证,还可以实现平滑的过渡和动画效果。例如,表单在用户聚焦或...

    jQuery+css 流程图插件

    2. **样式设计**:通过设置颜色、边框、阴影等属性,CSS可以定制流程图的样式,使其符合网站的整体风格。 3. **交互反馈**:利用伪类如`:hover`和`:active`,可以为流程图的节点添加鼠标悬停和点击时的视觉反馈。 *...

    jquery+css3缩略图图片全屏特效

    【jQuery + CSS3 缩略图图片全屏特效】是一种常见的网页设计技术,结合了JavaScript库jQuery的强大功能和CSS3的新特性,为用户提供了一种视觉上引人入胜的图片展示方式。这种特效通常用于创建具有专业外观的图像画廊...

    jquery css3带背景透明登录注册表单提交代码

    在IT领域,jQuery和CSS3是两个非常关键的技术,它们被广泛用于网页开发,特别是创建交互性和视觉吸引力的用户界面。本项目“jquery css3带背景透明登录注册表单提交代码”显然涉及到这两个技术的结合,旨在实现一个...

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    特别是CSS3的transition和animation属性,可以创建无插件的动态效果,如图片淡入淡出、滑动等。 3. 宽屏设计: 宽屏设计通常是指适应大屏幕分辨率的设计,旨在充分利用大屏幕空间,提供更广阔的视觉体验。在这个...

Global site tag (gtag.js) - Google Analytics