修改元素样式

原创
2013/10/20 22:09
阅读数 116

       修改元素样式的方法有两种。可以添加或删除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。
 










展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部