JQuery常用CSS操作

  • $(elem).css(obj):设置行内样式
  • $(elem).position():返回相对于父容器位置,只能获取不能设置
  • $(elem).offset(obj):返回相对于页面左上角位置,既能获取也能设置
  • $(elem).scrollTop(num):返回滚动条位置,设置滚动条位置
  • $(elem).width(num):设置宽度,获取宽度
  • $(elem).height("50px"):设置高度,获取高度
  • $(elem).addClass(className1 className2):添加class
  • $(elem).removeClass(className1 className2):删除class
  • $(this).toggleClass("div1",bool):开关切换,true可以,false不行

toogleClass给div添加/删除名为div1的class

 $("div").addClass("div0").click(function(){
$(this).toggleClass("div1");//可以开关切换
// $(this).toggleClass("div1",true);//只可以切换过来
// $(this).toggleClass("div1",false);//不能切换
})

 获取宽高:

  • $(elem).width(num):获取/设置宽度(无参时返回高度,否则返回JQ对象)
  • $(elem).height(num):获取/设置高度(无参时返回高度,否则返回JQ对象)
  • $(elem).innerWidth(num):获取/设置padding+content(无参返回宽,否则返回JQ对象)
  • $(elem).innerHeight(num):获取/设置padding+content(无参返回高,否则返回JQ对象)
  • $(elem).outerWidth(para):无参获取content+margin+padding,参为数值设置outerWidth,参为true获取占位宽(content+padding+margin+border)

JQuery常用CSS操作的更多相关文章

  1. JQuery 之CSS操作

    JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p" ...

  2. JQuery常用属性操作,动画,事件绑定

    jQuery 的属性操作        html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.        text() 它可以设置和获取起始标签和 ...

  3. jQuery基础--CSS操作、class操作、attr操作、prop操作

    1.1.1    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...

  4. 【JQuery】css操作

    一.前言         接着上一章的内容,继续JQuery的学习 二.内容 css 设置或返回匹配元素的样式属性 $(selector).css(css-property-name) $(selec ...

  5. jQuery常用ajax操作

    在做asp.net项目的时候经常会用到ajax操作,现总结常用的ajax操作供平时项目中参考 第一种: 前端代码: <script type="text/javascript" ...

  6. jquery之css操作

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. jquery对css操作

    1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);} ...

  8. jQuery的CSS操作

    .css()--获取匹配元素集合中的第一个元素的样式属性的值设置每一个匹配元素的一个或多个CSS属性. .hasClass()--确定不论什么一个匹配元素是否有被分配给定的(样式)类: .addCla ...

  9. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

随机推荐

  1. Android开发实战——记账本(4)

    开发日志(4)——MainActivity 在MainActivity中编写了几个方法.首先,点击账本的一条记录可以选择删除他,然后重写了fab,使之在点击他后能够添加记录.还写了删除全部记录的方法. ...

  2. ansible笔记(11):tags的用法

    你写了一个很长的playbook,其中有很多的任务,这并没有什么问题,不过在实际使用这个剧本时,你可能只是想要执行其中的一部分任务而已,或者,你只想要执行其中一类任务而已,而并非想要执行整个剧本中的全 ...

  3. 一文复习JSP内容

    概念: JSP 全名为 Java Server Pages, 中文名叫 java 服务器页面, 其根 本是一个简化的 Servlet 设计, 它是由 Sun Microsystems 公司 倡导. 许 ...

  4. shiro登录认证过程讲解

      先粘出登录的代码 1. 可以看到已经获取到了username和password ,为了接下来的认证过程,我们需要获取subject对象,也就是代表当前登录用户,并且要将username和passw ...

  5. 网关集成Swagger出现404错误

    原因是忘了在需要生成api的类上加入注解  @EnableSwagger2Doc

  6. Swagger-ui接口文档

    参考地址 https://github.com/swagger-api/swagger-core/wiki/Annotations-1.5.X#quick-annotation-overview   ...

  7. 【visio】故障树分析图

    率属于 商务 故障树是从一个可能的事故开始,自上而下.一层层的寻找顶事件的直接原因和间接原因事件,直到基本原因事件,并用逻辑图把这些事件之间的逻辑关系表达出来. 主要的应用场景:分析复杂问题原因,一个 ...

  8. php 填写pdf 表单

    最近接到新的任务,要求把pdf的文档,编辑后发邮件 首先pdf表单提交,需要用到这个东西pdftk,GitHub地址:https://github.com/mikehaertl/php-pdftk 首 ...

  9. Django框架-模板层

    Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...

  10. APP测试用例

    日程管理APP测试用例 测试编号 测试用例 实际结果 期望结果 测试结果(Pass/Failed) 备注 NO.1 输入正确的用户名和密码点击登录 登录成功 登录成功 Pass NO.2 点击注册界面 ...