jQuery 改变CSS样式基础代码_jquery

其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

复制代码 代码如下:

$("#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的方法来改变鼠标划过的链接样式。

时间: 2024-08-14 03:24:26

jQuery 改变CSS样式基础代码_jquery的相关文章

基于jquery animate操作css样式属性小结_jquery

昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

jquery 操作css样式、位置、尺寸方法汇总_jquery

一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

java-下面是两张图片,就是点击编辑改变css样式,怎样实现,还要再dialog上点击,实现删除

问题描述 下面是两张图片,就是点击编辑改变css样式,怎样实现,还要再dialog上点击,实现删除 # 解决方案 你下面的标签用div容器float布局,div relative定位,那个xx按钮absolute定位,默认隐藏.点击编辑的时候新增一个样式给div容器,这个样式控制xx的显示. 大概demo如下,居于jquery的,那个xx的样式你自己调整了 <script type="text/javascript" src="http://ajax.aspnetcdn

JavaScript改变CSS样式的方法汇总

  JavaScript修改CSS有4种方法:1.修改节点style(内联样式);2.改变节点class或id;3.写入新的css;4.替换页面中的样式表.今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用 JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的css; 替换页面中的样式表. 个人不

Javascript改变CSS样式

 改变CSS样式分为局部和全局,下面为大家介绍下使用Javascript具体的实现,感兴趣的朋友可以参考下 一.局部改变样式    有三种方法:直接改变样式.改变className和改变cssText    改变className: document.getElementById('obj').className="-"    改变cssText:document.getElementById('obj').style.cssText="width:20px; border:

鼠标移入移出改变CSS样式的小例子

网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

如何使用jquery控制CSS样式,并且取消Css样式

使用jquery控制CSS样式,并且取消Css样式的一个简单小实例,需要的朋友可以参考下   jquery控制CSS样式,并且取消Css样式(如背景色)   $("#tab1").css("background-color", "");    $("#" + left_tabid).css("background-color", "#025891");

jquery修改css样式函数

下面提供一款jquery修改css样式函数,他可以修改text password submit reset button radio textarea checkbox file以及focus  blur 事件等. */ $(document).ready(function(){  $("input[type='text']").addclass('input_blur');  $("input[type='password']").addclass('input_

jQuery 添加/移除CSS类实现代码_jquery

其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 复制代码 代码如下: $("#target").addClass("newClass"