jQuery修改操作css属性实现方法

Posted 2020-06-18 大西瓜3721

在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我们也来看看

下表是修改CSS类相关的jQuery方法:

 

名称	说明	实例
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类像集合一样修改, 再也不必手工解析字符串.注意 addClass( class ) 和removeClass( [classes] ) 的参数可以一次传入多个css类, 用空格分割,比如:

$(“#btnAdd”).bind(“click”,

      Function(event){

$(“p”).addClass(“colorRed borderBlue”);

}

);

removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:

$(“p”).removeClass(); 

2. 修改CSS样式

同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性"style"时,  jQuery也提供了相应的方法:

 

名称	说明	实例
css( name )	访问第一个匹配元素的样式属性。	取得第一个段落的color样式属性的值: $("p").css("color");
css( properties )	把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。	将所有段落的字体颜色设为红色并且背景为蓝色:  $("p").css({ color: "#ff0011", background: "blue" });
css( name, value )	在所有匹配的元素中，设置一个样式属性的值。 数字将自动转化为像素值	将所有段落字体设为红色: $("p").css("color","red");