`
koothon
  • 浏览: 7077 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery 改变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样式

    ### jQuery基础 - 改变CSS样式 #### 一、引言 在Web开发中,动态地改变页面元素的样式是一项非常实用且常见的需求。通过JavaScript及其流行库jQuery,开发者能够轻松实现这一目标。本文将详细介绍如何利用jQuery来...

    jQuery制作控制css样式表切换各个样式表

    通过使用jQuery,我们可以轻松地实现动态切换不同的CSS样式表,从而改变网页的视觉效果。下面将详细讲解如何使用jQuery来实现这一功能。 首先,我们需要在HTML文档中引入jQuery库。通常,我们可以通过CDN链接或者...

    jQuery+CSS实现淡入效果的超链接样式

    在这里,我们将利用CSS为超链接定义基础样式,并通过jQuery来控制这些样式的动态变化,实现淡入效果。 要实现淡入效果,我们需要设置超链接的初始透明度。在CSS中,我们可以使用`opacity`属性来控制元素的透明度,...

    jQuery+css 流程图插件

    "jQuery+css 实现的单分支流程图插件"是一个利用JavaScript库jQuery和CSS样式来创建简单、动态流程图的解决方案。这种插件特别适合那些希望快速实现流程展示,而无需深入了解复杂图表库的开发者。 **jQuery库的运用...

    JS+JQuery+CSS基础笔记

    【CSS样式表】 CSS(Cascading Style Sheets)用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。以下是CSS的一些基础知识: 1. 选择器:CSS通过选择器来定位元素,如标签选择器(p{}),类选择器...

    jQuery UI自定义样式日历代码.zip

    1. **修改默认CSS**:可以直接编辑jQuery UI的CSS文件,改变预设的样式。例如,如果想要更改日历的背景色,可以找到对应的类(如`.ui-widget-content`),并修改其背景颜色属性。 2. **使用主题生成器**:jQuery UI...

    jquery+css 各种不同样式的登录页面

    通过研究这些实例,不仅可以学习到jQuery和CSS的基础知识,还能了解到如何将它们结合起来,创造出具有高度交互性和视觉吸引力的登录页面。同时,也要注意在设计过程中考虑到用户体验和网页性能,确保登录过程既美观...

    jQuery+CSS3黑色时钟代码.zip

    在提供的压缩包中,`index.html`是主网页文件,包含了HTML结构、引入的jQuery库和自定义JavaScript代码,以及CSS样式链接。`jquery-easyui-1.3.6_demo`可能是为了演示jQuery EasyUI插件的使用,虽然在这个特定的时钟...

    jQuery自动生成css投影样式

    `index.html`很可能是示例代码的入口文件,`www.jq22.com.txt`可能包含有关jQuery插件或教程的链接,`jquery插件库.url`可能是一个快捷方式指向jQuery的在线资源库,而`css`、`js`和`scss`目录则可能包含项目所需的...

    jQuery+css3手机触屏滑动切换图片列表代码

    在本项目中,"jQuery+css3手机触屏滑动切换图片列表代码"是一个利用jQuery和CSS3技术实现的响应式图像展示方案,特别适用于移动设备。以下是该项目涉及的主要知识点和详细说明: 1. **jQuery**:jQuery是一个快速、...

    cssjquery仿ext样式页面

    文件名为“css+jquery仿ext样式页面”的压缩包可能包含了实现这一目标所需的CSS样式文件、jQuery脚本文件,以及可能的HTML模板文件。在使用这些资源时,需要将它们正确地链接到HTML文档中,并确保jQuery库在其他脚本...

    jquery控制css各个样式表切换.zip

    在这个"jquery控制css各个样式表切换.zip"的项目中,我们将探讨如何使用jQuery来实现多个CSS样式表之间的切换,以改变网页的外观。 首先,我们需要了解HTML中的`<link>`标签,它是用来引入外部样式表的。例如: ``...

    jQuery步骤进度条样式代码.zip

    标题中的"jQuery步骤进度条样式代码.zip"指出,这是一个使用jQuery库实现的步骤进度条样式的代码资源。这种进度条通常用于多步骤表单或流程,让用户清晰地看到他们当前所处的步骤以及整个过程的进度。在网页设计中,...

    基于jquery+css3来实现的超酷相册效果的代码.rar

    在本资源中,我们关注的是一个使用jQuery和CSS3技术实现的创新相册效果的代码示例。这个压缩包文件名为"基于jquery+css3来实现的超酷相册效果的代码.rar",表明它包含了一组编程代码,用于创建具有视觉吸引力的相册...

    jquery+css3控制音量调节

    2. CSS部分:定义滑动条和按钮的样式,以及滑动条的动画效果。 3. JavaScript/jQuery部分:绑定事件监听器,如点击事件和滑动事件,根据用户的操作更新音频的音量,并同步滑动条的状态。 在`dist`文件夹中,可能...

    Jquery控制A标签Css样式

    ### JQuery控制A标签CSS样式的实现方法 在前端开发中,使用JQuery库来操作DOM元素的样式是一种常见的做法。本文将详细介绍如何利用JQuery控制动态`<a>`标签的CSS样式,包括鼠标悬停、点击等交互效果的实现。 #### ...

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

    2. **CSS样式**:利用CSS3,我们可以设置元素的样式,使其符合设计需求。例如,可以设定字体大小、颜色、边框等。同时,为了实现滚动效果,我们可能需要设置`transition`属性,如`transition: all 1s linear;`,这...

Global site tag (gtag.js) - Google Analytics