`
zpball
  • 浏览: 919317 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

操作元素的CSS样式

阅读更多
添加或去除元素集合的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数组。
分享到:
评论

相关推荐

    形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip

    在本形考任务中,我们将探讨如何利用HTML的`<div>`元素以及CSS样式表来实现页面布局设计。`<div>`元素是HTML中的一个非常重要的结构元素,它用于组合其他HTML元素,形成一个可样式的区块。在这个任务中,我们将深入...

    Qt css样式大全+详细书签pdf.zip

    - wang13342322203的博客 - CSDN博客_files"很可能包含了博客文章中引用的图片、示例代码或其他辅助资料,这些辅助材料对于理解文章内容和实际操作具有重要作用,可以帮助开发者直观地看到CSS样式的应用效果,并能...

    jQuery操作元素css样式的三种方法

    在Web开发中,改变页面元素的样式是一项基础而频繁的操作,jQuery作为一个优秀的JavaScript库,简化了这一过程,提供了三种非常实用的方法来操作元素的CSS样式,它们分别是:addClass(), removeClass() 和 ...

    DW CS6 CSS样式汉化文件补丁

    此"DW CS6 CSS样式汉化文件补丁"是为了帮助用户将Dreamweaver CS6中的CSS样式编辑界面翻译成中文,使得不懂英文或者英语水平有限的用户也能更好地理解和操作这个强大的工具。 在Dreamweaver CS6中,CSS(Cascading ...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    通过这个“上百个CSS实例集合”,你可以亲手实践这些知识点,逐步巩固理论并提升实际操作能力。从基础的样式设置到复杂的布局设计,每一个实例都是一个学习和进步的机会,让你的CSS技能更上一层楼。开始探索这个丰富...

    JQuery操作元素的css样式

    本文主要介绍了JQuery中操作元素CSS样式的几种方法,包括添加、移除、切换CSS类以及判断元素是否具有特定CSS类,同时提供了一个动画效果的实例。 首先,我们要了解操作元素的CSS样式对于提升用户体验至关重要。在不...

    CSS样式图片下载助手

    《CSS样式图片下载助手——轻松获取网页图像资源》 在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义元素的外观和布局。其中,图片是构成页面视觉效果的重要组成部分,如背景图片、图标等。然而,...

    24种非常漂亮的分页css样式

    "24种非常漂亮的分页css样式"是一份资源,提供了24个独特且美观的分页设计示例,这些示例利用了CSS(层叠样式表)的力量,来实现视觉上的吸引力和用户体验的提升。 首先,我们要理解CSS在网页设计中的核心作用。CSS...

    css样式背景下载提取器

    CSS样式不仅控制文本、字体、颜色等元素,还负责处理网页的布局和背景图像。当我们在分析或复制一个网站的设计时,有时需要获取CSS中的所有背景图片,以便于本地化资源或进行设计研究。"CSS样式背景下载提取器"就是...

    CSS样式论坛实例

    1. **论坛主题模板**:创建一个模拟论坛主题列表的HTML页面,使用CSS样式定义每个主题的外观,包括标题、作者、日期等元素。 2. **回复样式**:设计一个回复框,包括输入框、提交按钮和预览区域,利用CSS实现输入框...

    Javascript获取相同CSS样式的元素

    总的来说,获取具有相同CSS样式的元素需要对DOM操作、CSS选择器以及可能的库(如jQuery)有深入的理解。在JavaScript中,这可以通过遍历元素、检查样式属性来实现;而在jQuery的帮助下,这个过程变得更加简洁高效。...

    非常实用好看的css样式后台模版

    "非常实用好看的css样式后台模版"是一份集合了多个高质量、适用于后台管理界面的CSS模板资源。 这些模板通常包含了丰富的样式和布局设计,如响应式布局、导航菜单、数据表格、图表、按钮、表单元素、提示信息、模态...

    CSS样式案例集大全

    **CSS样式案例集大全** 本资源集合是一份全面的CSS样式案例集,旨在帮助开发者深入理解和熟练运用CSS在实际项目中的应用。CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)...

    CSS样式表.ppt

    【CSS样式表】是网页设计中的重要组成部分,全称为Cascading Style Sheets,它用于分离网页内容(HTML或XML等)与表现样式。通过CSS,我们可以精确地控制网页元素的布局、字体、颜色、背景、边框以及定位,实现更...

    jQuery制作控制css样式表切换各个样式表

    通过使用jQuery,我们可以轻松地实现动态切换不同的CSS样式表,从而改变网页的视觉效果。下面将详细讲解如何使用jQuery来实现这一功能。 首先,我们需要在HTML文档中引入jQuery库。通常,我们可以通过CDN链接或者...

    dvi和css样式操作

    操作CSS样式,你需要了解其基本选择器,如类选择器(.class)、ID选择器(#id)和标签选择器(element)。还有更高级的选择器,如属性选择器、伪类和伪元素等。CSS样式规则通常由选择器和声明组成,声明则由属性和值...

    jQuery官网CSS样式复刻

    在本项目中,“jQuery官网CSS样式复刻”是一项旨在重现jQuery官方网站前端界面样式的实践任务。这个任务主要涉及五个核心技术领域:jQuery、CSS、JavaScript(包括ECMAScript)、HTML以及网页资源管理。下面我们将...

    Dreamweaver CS6 CSS样式表

    #### 三、Dreamweaver CS6中的CSS样式表操作 ##### 3.1 创建CSS样式 1. **打开Dreamweaver CS6**:首先启动Dreamweaver CS6程序。 2. **新建或打开现有项目**:如果已有HTML文件,则可以直接打开;如果没有,则...

    EasyUI很全的CSS样式文件与图标

    EasyUI是一种基于jQuery的前端框架,它为开发者提供了丰富的CSS样式和图标资源,极大地简化了网页界面的开发工作。在HTML5和HTML的基础上,EasyUI通过CSS和JavaScript技术,为Web应用提供了美观、统一的用户界面。这...

Global site tag (gtag.js) - Google Analytics