zoukankan      html  css  js  c++  java
  • 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。注意在分割返回的字符串时,首先判断字符串是否为空。如:

  • 相关阅读:
    java面试笔记6
    Java面试笔记5
    Java面试笔记5
    网上订单管理-新增
    网上订单管理-级联;可编辑列表
    网上订单管理-新增、修改
    数据库嵌套查询
    网上订单管理-数据呈现
    video 移动端内联播放,视频上层可显示弹幕、点赞。video转canvas播放
    vue 日期格式化过滤器
  • 原文地址:https://www.cnblogs.com/red-fox-qhq/p/3929143.html
Copyright © 2011-2022 走看看