JQuery中操作Css样式的方法


Posted in Javascript onFebruary 12, 2014
//1、获取和设置样式
$("#tow").attr("class")获取ID为tow的class属性
$("#two").attr("class","divClass")设置Id为two的class属性。
//2、追加样式
$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2
//3、移除样式
$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")移除多个样式。
//4、切换类名
$("#two").toggleClass("anotherClass") //重复切换anotherClass样式
//5、判断是否含有某项样式
$("#two").hasClass("another")==$("#two").is(".another");
//6、获取css样式中的样式
$("div").css("color") 设置color属性值. $(element).css(style)
//设置单个样式
$("div").css("color","red")
//设置多个样式
$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")
//7.offset()方法
//它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。
//注意:只对可见元素有效。
var offset=$("div").offset();
var left=offset.left;         //获取左偏移
var top=offset.top;        //获取右偏移
//8、position()方法
//它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。
//9、scrollTop()方法和scrollLeft()方法
$("div").scrollTop();        //获取元素的滚动条距顶端的距离。
$("div").scrollLeft();         //获取元素的滚动条距左侧的距离。
//10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:
//toggle:动态效果为从右至左。横向动作。
//slideToggle:动态效果从下至上。竖向动作。
//比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。
$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
Javascript 相关文章推荐
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 #Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
You might like
PHP利用str_replace防注入的方法
2013/11/10 PHP
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
利用python画出折线图
2018/07/26 Python
Django 多环境配置详解
2019/05/14 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python实现微信好友的数据分析
2019/12/16 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
公司年会晚宴演讲稿
2014/01/06 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
捐书活动倡议书
2015/04/27 职场文书
同意转租证明
2015/06/24 职场文书
辅导员学期工作总结
2015/08/14 职场文书
英语导游欢迎词
2015/09/30 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python