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. Linux gd库安装步骤说明

    gd 库是 PHP 处理图形的扩展库,它提供了一系列用来处理图片的 API(应用程序编程接口),使用 gd 库可以处理图片或者生成图片.在网站上,gd 库通常用来生成缩略图,或者对图片加水印,或者生成 ...

  2. 【vue】axios + cookie + 跳转登录方法

    axios 部分: import axios from 'axios' import cookie from './cookie.js' // import constVal from './cons ...

  3. MyBatis(6)——分页的实现

    分页的实现 a)通过mysql的分页查询语句: 说明:sql的分页语句格式为select * from aaa limit #{startIndex},#{pageSize} //---------- ...

  4. 吴裕雄 python 机器学习——支持向量机SVM非线性分类SVC模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model,svm fr ...

  5. Java - Test - TestNG: testng.xml 简介

    1. 概述 简介 testng.xml 中的格式, 元素 2. 背景 testng.xml 概述 测试套件 的配置文件 问题 一下生成了那么多内容 我有点看不懂 一上来就看不懂, 其实很正常, 慢慢说 ...

  6. 移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设   前言:本文是<移动APP客户端安全笔记>系列原创文章中的第一篇,主要讲的是企业移动APP自动化漏洞检测平台建设,移动APP漏洞检测发展史与前沿技术,A ...

  7. Flask 学习之flask入门

    一.Flask的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  8. MyBatis-Spring整合之方式2

    提前叨叨:此方法优化了上一个方式的事务支持,同时简化了一个bean的配置 1.在方式1的基础上修改UserDaoImp文件,改用使用继承SqlSessionDaoSupport的方式.代码如下: pu ...

  9. idea项目更改git地址

    第一步:idea打开项目,菜单栏找VCS - Git - Remotes 点进去,弹出对话框,选中,点击编辑 弹出编辑框,更改地址,点击ok 弹出输入账号密码编辑框,输入自己的账号密码,点击确认 完成 ...

  10. js遍历传参到html

    <p id="subp" hidden><button id= "upsub"shiro:hasPermission="sys:me ...