修改元素样式

2019独角兽企业重金招聘Python工程师标准>>>

       修改元素样式的方法有两种。可以添加或删除CSS样式类，从而导致现有样式根据新的CSS类而重塑元素的样式。也可以操作DOM元素，直接应用新样式。

      1.1添加和删除类名称
      类名称特性和DOM元素的类名称属性在格式上和语义上与众不同，并且对富用户界面的创建来说也很重要。给元素添加类名称或者从元素中删除类名称，是动态修改元素样式呈现的基本手段之一。
      使得元素类名称与众不同的方面之一（也是必须应对的一个挑战），就是每个元素可被指派任意多个类名称。在HTML里，class特性被用来提供以空格分隔、由多个类名称所组成的字符串。例如：

<div class="someclass anotherclass yetAnotherclass"></div>

      不幸的是，在DOM元素相应的className属性里，这些类名称不是表示为名称数组，而是空格分隔的字符串。这意味着每当我们想给已拥有类名称的元素添加或删除类名称，就必须解析字符串，以便在读取时确定单独的名称，而在写入时确保还原为空格分隔的有效格式。
      尽管编写代码来处理这个问题并不是一件特别困难的事，但隐藏这些机械操作的细节而抽象出简介的API，终归是给好主意。jQuery已经为我们实现了。
      添加类名称到匹配集的所有元素，如果利用一下addClass()命令进行操作就非常简便。
      addClass(names)：添加制定的一个或者多个类名称到包装集的所有元素，并返回一个包装集。
      names：一个字符串，包含将要添加的一个类名称，或者包含空格分隔符的、将要添加的多个类名称。

      removeClass(names)：从包装集各元素里删除指定的一个或者多个类名称，并返回一个包装集。
      names：一个字符串，包含将要删除的一个类名称，或者包含空格分隔符的、将要添加的多个类名称。
    
      toggleClass(name)：如果在元素中指定类名称不存在，则添加指定类名称；如果元素已拥有指定类名称，则从元素中删除指定类名称。请注意：每个元素单独测试，所以一些元素被添加类名称，而其他则被删除类名称。
      name：一个字符串，包含用于切换的类名称。

     当我们想要快速简便地在元素之间切换视觉呈现时，toggleClass()命了最有用。

     1.2 获取和设置样式
     修改元素class特性允许从样式表已定义样式中选择一组预定义样式加以应用，但有时我们却想完全覆盖样式表。直接在元素上应用样式将自动覆盖样式表，使我们能够对单独元素及其样式施加更细化的控制。
     css()方法工作起来类似attr()方法，允许通过制定名称和值来设置单独的css属性，或通过传入一个对象来设置一系列css属性。
     css(name，value)设置指定的值到每个已匹配元素的指定的css样式属性。
     name（字符串）：将要设置的css属性名称。
     value（字符串|数字|函数）：如果传递函数作为参数，则为包装集各元素分别调用函数，以函数返回值作为css样式属性值，每次函数调用的this属性，设置为当前正在计算的元素。
     如上所述，value参数也像attr()命令那样接受一个函数。例如可以使包装集里所有元素的宽度都扩大20像素，如下所示：

$("div.expandable").css("width",function(){
      return  $(this).width()+20+"px";
});

     如何使用css()命令的快捷方式。
     css(properties)：为所有已匹配元素设置已传递对象里多个键所指定的css属性为相关的值（value）。
     properties（对象）：指定一个对象。对象的属性被复制为包装集里所有元素的CSS属性。
     就像使用attr()命令的快捷版本那样，可以使用函数作为properties参数对象里的任何CSS 属性值。jQuery为包装集个元素分别调用函数，确定将要应用的属性值。
      最后我们可以为css传入名称，以便获取与该名称相关联的属性的已计算样式。当我们说已计算样式时，意思是指所有链接、嵌入和内联的css都已应用之后的样式。给人深刻印象的是，这个命令能够跨浏览器完美工作。甚至传入opacity也能返回一个字符串，表示0.0到1.0之间的数字。
      我们可以通过width()和height()命令获取元素的宽度和高度的数值。如下命令和语法：
      width(value)
      height(value) 对匹配集里所有元素设置指定的宽度和高度。如下例子：

$("div.myElements").width(500);

等效于：

$("div.myElements").css("width","500px");

      函数以数字类型返回宽度和高度值的事实，并不是这些命令提供的唯一便利之处。如果你试图通过读取style.width 或者style.height属性查找元素的宽度或高度，你就会面临令人遗憾的事实——这些属性只会被那个元素相应的style特性所设置。想要通过这些属性查找元素的大小，首先必须设置这些属性。
      另一方面，width() 和height()命令计算并返回元素的大小。虽然通常没有必要知道简单页面上元素的准确大小，以便让元素恰当地布局，但是在富因特网应用里，知道准确大小却至关重要——才能恰当地放置活动元素，如上下文菜单、自定义工具提示、已扩张控件，以及其他动态组件。

      1.3样式相关的更有用的命令
      确定元素是否拥有特定类，是极为常见的需求。可以调用jQuery的hasClass()函数来实现：
      $("p:first").hasClass("surpriseMe");
      如果匹配集里某个元素拥有指定类，这个语句就返回true。
 

转载于:https://my.oschina.net/gao0516/blog/170163