关于jquery css的使用介绍

jQuery 操作 CSS


  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回被选元素的一个或多个样式属性。

jQuery css() 方法

〈1〉返回 CSS 属性

css("propertyname");

〈2〉设置 CSS 属性

css("propertyname","value");

〈2.1〉设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

  • width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
  • height() 设置或返回元素的高度（不包括内边距、边框或外边距）。 
    设置：$("#div1").width(500).height(500); more : $(window/document).width/height;

  • innerWidth() 返回元素的宽度（包括内边距）。
  • innerHeight() 返回元素的高度（包括内边距）。
  • outerWidth() 返回元素的宽度（包括内边距、边框和外边距）。
  • outerHeight() 返回元素的高度（包括内边距、边框和外边距）。

赞 (0)

相关推荐

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • JQuery CSS样式控制 学习笔记

    JQuery CSS样式控制 学习笔记

    jQuery 就不多说了,这是JS的一个函数库,比较常用,我们今天是就jQuery的三种用于css的操作进行总结 $(selector).css("name","value") $(selector).css({properties}) $(selector).css(name) $(selector).css("name","value")为所有元素给定CSS属性设置值: 下面看我刚写的代码 复制代码 代码如下: <h

  • JQuery中操作Css样式的方法

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

  • 关于jquery css的使用介绍

    jQuery 操作 CSS addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回被选元素的一个或多个样式属性. jQuery css() 方法 〈1〉返回 CSS 属性 css("propertyname"); 〈2〉设置 CSS 属性 css("propertyname","value")

  • jquery+css实现下拉列表功能

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fruit</title> <style type="text/css"> .hide { display: none; } div { float: left; width: 100%; } .selector

  • jquery css 选择器演示代码

    jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • jquery+css实现Tab栏切换的代码实例

    jquery+css实现Tab栏切换的代码实例

    前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设

  • jQuery+css实现的切换图片功能代码

    jQuery+css实现的切换图片功能代码

    本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • jQuery+CSS实现的网页二级下滑菜单效果

    jQuery+CSS实现的网页二级下滑菜单效果

    本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了,在IE下表现不错,在火狐下发现菜单有闪烁现象,有空会继续修正,感谢大家捧场哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具体

  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

  • jquery css实现邮箱自动补全

    jquery css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. HTML代码:emailAutoComple.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>邮箱自动补全&l

  • jQuery+css实现炫目的动态块漂移效果

    jQuery+css实现炫目的动态块漂移效果

    本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • jquery+CSS实现的多级竖向展开树形TRee菜单效果

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea

随机推荐