jquery轻松操作CSS样式

$(this).click(function(){
  if($(this).hasClass(“zxx_fri_on”)){
    $(this).removeClass(“zxx_fri_on”);
  }else{
    $(this).addClass(“zxx_fri_on”);
  }
  return false;
});

 

添加或去除元素集合的class name

1. 使用addClass()方法

addClass(names) 添加names指定的一个或多个class name给wrapped set。如果有多个name,使用空格分开,总之names是个字符串。

返回原来的wrapped set以进行JQuery链式操作。

注意:如果在添加的样式声明中有重复声明,谁的优先级更高呢? 请参阅这里看CSS的权重分配。

2. 使用removeClass()方法

removeClass(names) 去除names指定的一个或多个class name。如果有多个names,使用空格分开。

返回原来的wrapped set以进行JQuery链式操作。

3. 使用toggleClass()方法

toggleClass(name) 这次只能有一个class name作为参数。如果该class已经存在,则去除之;如果没有则添加之。

返回原来的wrapped set以进行JQuery链式操作。

获取或设置CSS样式

1. 使用css(name, value)方法

这个方法用来设置css样式给wrapped set中的每一个元素。

name就是css样式的属性名称;

value可以是(string|number|function) ,类似于上节提到的attr(name, value)方法,value如果是function,则传给function的参数时元素在wrappsed set中的序号,function内部使用this指向正在被操作的Javascript DOM元素(够强)。function的返回值就是要设置的 css属性的值了。

比如:

$(‘div‘).css(‘font-size‘, function(n){
        return (n+1)+‘em‘;

});

将页面中div按照出现的顺序依次加大字体大小。

2. 使用css(properties)方法

参数properties是一个object,其中定义了class属性名称和值对。这样一次就可以进行多个css属性的设置了。

返回的依然是wrapped set以方便JQuery链式操作。

如:

$(‘div:eq(0)‘).css({

‘font-size‘ : ‘2em‘,

‘color‘ : ‘#cc00ff‘

});

比较郁闷的是,这个Object的属性名必须用引号引起来作为一个字符串,否则是不能被浏览器识别的,attr()类似的方法就无需这样。

同样Object中也可以包含function,如:

$(‘div‘).css({
        ‘font-size‘: function(n)
            {
                return (n+2) + ‘em‘;
            }

});

3. 使用css(name)方法

这个方法返回由name指定的css 属性的值,返回的值是一个字符串,因此有些情况需要转换一下。这个方法只能返回wrapped set中第一个元素的指定css属性值。

如:$(‘#firstDiv‘).css(‘font-size‘)可能返回一个字符串 ‘16PX‘。

顺便说一下,如果想得到指定元素的class名称(如果指定的话),使用Javascript标准方法,如:

$(‘#firstDiv‘)[0].className

4.使用width()和height()方法

1)不带参数的width()和height()方法返回wrapped set中第一个元素的宽和高,这里直接返回一个number(单位为px),无需从字符串转换了。

2) 带参数的witdh(value)和height(value) 给wrapped set中每个元素指定由value表示的宽高。返回wrapped set。

value的值可以是number或者是字符串。如果是number则单位是px。

如:$(‘div‘).width(600);    //600px

$(‘div‘) .width(‘400mm‘); //400mm

hasClass(name)方法

判断wrapped set中是否有任何一个元素包含了name指定的class name, name也可以是一个用空格分开的多个class names组成的字符串。返回true | false;

注意:class name和class property name的区别:

-- class name指定义style的css名称,一个style定义会包含很多class property.比如定义一个叫 ownStyle的样式。

-- class property name指css规范中的css属性名。比如 font-size,color等等。

如果想得到一个元素的所有class names,使用attr(‘className‘)方法或者Javascript DOM属性className。注意在分割返回的字符串时,首先判断字符串是否为空。如:

$.fn.getClassNames = function() {
    if (name = this.attr("className")) {
        return name.split(" ");
    }
    else {
        return [];
    }
};

这段代码为JQuery添加了扩展函数getClassNames()用来得到元素的class name数组。

jquery轻松操作CSS样式

时间: 2024-08-05 20:56:37

jquery轻松操作CSS样式的相关文章

JQuery中操作css样式

//1.获取和设置样式  $("#tow").attr("class")获取ID为tow的class属性  $("#two").attr("class","divClass")设置Id为two的class属性.  //2.追加样式  $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2  //3.移除样式  $(

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jQuery系列 第三章 jQuery框架操作CSS

第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程.     使用原生的方式来设置标签的样式(代码示例) 1 <body> 2 <div>我是div标签</div> 3 <button id=

操作css样式【js】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ti

自定义动画animate可以操作css样式属性总结

自定义动画animate可以操作css样式属性总结 backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * borderTopWidth * borderSpacing * marginBottom * marginLeft * marginRight * marginTop * outlineWidth * paddingBottom * paddingLeft *

1113Js操作CSS样式

1.Js操作css样式 Div.style.width="100px".在div标签内我们添加了一个style属性,并设定 了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. 我们没有让css和html分离. 所以如果是为了获取css样式 window.getComputedStyle() 获取经过计算机计算的所有属性 就是只要渲染出来的都是经过计算的. getComputedStyle()第一个参数是当前元素,第二个一般我们写null 并且这个方法是只读,

jquery操作CSS样式全记录

$(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”);  }else{    $(this).addClass(“zxx_fri_on”);  }  return false;});   添加或去除元素集合的class name 1. 使用addClass()方法 addClass(names) 添加names指定的一个或多个class name给wr

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

在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("b

jQuery基础 - 改变CSS样式

jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接. //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变