jq修改class_jQuery如何快速修改class属性和CSS样式
class属性修改
类属性即class属性,规定类名.
用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.
注意每个html元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔.
具体使用方法见:https://www.w3school.com.cn/css/css_selector_class.
用jquery进行类名修改既可以用attr()方法修改”class”属性,也可以用addclass(), removeclass(), toggleclass()等方法来完成.
addclass()
api: https://api.jquery.com/addclass/
addclass()方法向匹配的元素增加指定的类名(一个或多个).
注意对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性.
用attr()方法设置class属性,是一个覆盖的过程;而addclass()则是一个追加的过程.
class之间最终是用空格来隔开的.
如果需要添加多个类,用空格分隔类名.
从1.4开始,这个方法的参数也可以传入一个function.
removeclass()
api: https://api.jquery.com/removeclass/
removeclass()方法从被选元素移除一个或多个类.如需移除若干类,用空格来分隔类名.
如果没有传参数,该方法将会移除被选元素的所有类.
toggleclass()
api: https://api.jquery.com/toggleclass/
toggleclass()方法对被选元素的一个或多个类进行切换(设置或移除).
该方法检查每个元素中的指定类,如果存在则删除,如果不存在则添加.
通过添加参数,可以设置只进行删除或者只进行添加操作.
格式:$(selector).toggleclass(class,switch)
switch值为true时,只添加;为false时,只删除.
hasclass()
api: https://api.jquery.com/hasclass/
hasclass()方法检查被选元素是否包含指定的class.
还可以用is()方法实现同样的功能,方法参数传入一个选择器字符串,比如”.classname”.
css样式修改
jquery中还有一些方法直接返回或者设置元素的css属性.
css()
api: https://api.jquery.com/css/
读操作: 获取匹配元素集合中第一个元素的指定样式值(一个或多个).
注:读取多个样式值的操作是在jquery v1.9才加入的.
写操作: 为匹配元素集合中的每一个元素设置一个或多个css属性的值.
传入的参数可以是单个的键值对,也可以是plainobject指定的多个值,还可以是function.(v1.4).
jquery会处理各个中不太相同的一些具体情况,比如w3c的cssfloat在ie中是stylefloat,在jquery中,你可以使用float,然后jquery会帮你把它翻译成每个浏览器中应该有的正确名称.
还有,jquery会合理解读css和dom格式的多词属性,比如.css(“background-color”)和.css(“backgroundcolor”),它都是可以处理的.
height()和width()
api: https://api.jquery.com/height/和https://api.jquery.com/width/
高度和宽度属性.这个宽高值不包括padding,border和margin.除非box-sizing属性被使用了.
注意写操作的时候set的是content的宽高,不包括box-sizing的部分.
读操作仍然是返回集合第一个元素的属性值.
.css(“width”)和.width()的区别是:前者返回带单位的值,比如400px;后者返回不带单位的像素数值,即400.
所以如果值需要被用于某种计算,.height()和.width()是被推荐使用的.
读取得到的数值不一定是整型,并且如果用户缩放了页面,其值可能是不正确的,因为浏览器没有暴露这种情况的api.
还有一种不准确的情况,当这个元素的父元素隐藏起来时,该元素的尺寸可能读不准.
写操作支持的value类型是字符串或者数字.
如果是数字,jquery默认是px为单位.
如果是字符串,除了可以数字加单位之外,任何合理的css measurement都可以用,比如100%,50%,或者auto.
position()
api: https://api.jquery.com/position/
返回第一个匹配元素相对于父元素(offset parent)的位置.
只有读操作.
offset()
api: https://api.jquery.com/offset/
返回第一个匹配元素的坐标,或者设定每一个匹配元素的坐标,这个坐标是相对于document的.
offsetparent()
api:https://api.jquery.com/offsetparent/
返回父类,只有读操作.
scrollleft()和scrolltop()
api: https://api.jquery.com/scrollleft/和https://api.jquery.com/scrolltop/
希望与广大网友互动??
点此进行留言吧!
jq修改class_jQuery如何快速修改class属性和CSS样式相关推荐
- css view a if属性,uni-app学习笔记(2)view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式 当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
- jQuery 从零开始学习 (三) 属性与css样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将 ...
- php怎么修改div自带属性吗,修改html 属性,css样式。
一 通过修改标签属性来改变它的样式 js设置和获取标签的属性 window.onload = function () { var attr = document.getElementById(&quo ...
- html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言 Hypetext Markup Language 特点: 不需要编译,直接由浏览器执行 是一个文本文件 必须用htm或html作文件后缀 对大小写不敏感,HTML或html都可以 ...
- 如何用jquery动态改变 input 输入框的readonly属性及CSS样式
样例 <style type="text/css">.disable{background-color: #d2d2d2;} </style><div ...
- JQ或JS仿京东淘宝属性规格SKU样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 用MATLAB快速修改txt文件
用MATLAB快速修改txt文件 快速修改txt文件 概要: 做数据集或使用别人的数据集的时候一般会有一个txt格式的文件,其内容是所有带路径的文件名.此时可能因为路径等原因需要需要对这个txt文件进 ...
- jq获取和设置标签的css样式、jq给标签增加或移除class属性
1.jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式,也可以设置样式,包括行内.内部.外部样式: 思路:先要选取这个标签,然后再获取或者设置样式: 获取css属性: ...
- easyui 修改单元格内容_初学Excel办公软件快速修改文字的方法
今天我们学习Excel办公软件快速修改文字的方法,首先我们看这个表格里面的文字很多都是相差一个字,甚至很多内容相差不大,因此我们在输入文字时就需要改进快速方法了. 首先我们根据图片来操作,我们修改红色 ...
最新文章
- ARCGIS影像配准教程
- 十问 | 关于Service Mesh 和Kubernets的最前沿思考
- android键盘ui,android – 在自定义键盘中重新调整候选视图的UI
- mysql数据库truncate 夯住_MySQL如何优雅的删除大表实例详解
- BigData:根据最新2018人工智能行业创新企业Top100名单,绘制AI行业VC最AI的热门领域(投资领域)
- UI组件之AdapterView及其子类(四)Gallery画廊控件使用
- 第07课:【实战】调试Redis准备工作
- IOS设置导航栏的背景图片和文字
- trunc怎么进行日期相减_三年级数学日期计算方法全在这里了,不分版本,孩子预习用得上...
- aspose转pdf不显示中文_word转pdf,迫不得已服务器从linux换成了windows,不完美的完美...
- vista企业版和旗舰版中的Bitlocker功能概述
- 质因数分解 2012年NOIP全国联赛普及组
- python冒泡排序_python实现基本算法之冒泡排序(Bubble Sort)
- Web在线预览CAD(使用AUTODESK)
- vmware esxi6.5安装使用教程(图文安装)
- python py转exe逆向
- 我读《非暴力沟通》- 马歇尔 *卢森堡 - 让爱融入生活
- 【高数】【本科笔记】【第七章 微分方程】【7.2 可分离变量的微分方程】
- onload和DOMContentLoaded事件
- PaddlePaddle笔记4-看图写诗
热门文章
- vue 实现搜索历史_微信小程序实现搜索历史功能
- 【向上取整/向下取整】C语言向上或向下取整 函数
- 在数组中查找指定元素 (10分)
- “当直男问你为什么上班不化妆时...” 哈哈哈哈哈姐妹回复绝了!
- Java动态代理中报java.lang.IllegalArgumentException非法参数异常
- 教你训练一个简单的音频识别网络(附代码)
- pywinauto精品入门教程
- VNC服务器搭建及局域网使用
- [推荐]300种生活小窍门
- python + Qt5 + opengl 绘制魔方(一)