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 通过模式匹配实现重载
Aug 12 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
js实现日历的简单算法
Jan 24 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
js实现旋转木马效果
Mar 17 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
PHP7新特性简述
2017/06/11 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python结合API实现即时天气信息
2016/01/19 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
phpquery中文手册
2021/03/18 PHP
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
工作自荐信
2013/12/11 职场文书
校园十大歌手策划书
2014/02/01 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
基层工作经验证明样本
2014/11/16 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书