jQuery实现获取及设置CSS样式操作详解


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery实现获取及设置CSS样式操作。分享给大家供大家参考,具体如下:

  • addClass():向被选元素添加一个或多个类
  • removeClass():从被选元素删除一个或多个类
  • toggleClass():对被选元素进行添加/删除类的切换操作
  • css():设置或返回被选元素的一个或多个样式属性

样式表实例:

.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}

addClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<h1>she is gone</h1>
<h2>no say anymore</h2>
<p>but i miss you</p>
<div>can you come back</div>
</br>
<button>addClass</button>
</body>
</html>

运行效果:

jQuery实现获取及设置CSS样式操作详解

可以在addClass()方法中规定多个类:

$("button").click(function(){
$("#div1").addClass("important blue");
});

removeClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">is she ?</h1>
<h2 class="blue">i do not know</h2>
<p class="blue">queit</p>
<br>
<button>removeClass</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

toggleClass()

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue{
color:blue;
}
</style>
</head>
<body>
<h1>who are you</h1>
<h2> i five thank you</h2>
<p>goodbye</p>
<button>toggleClass</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

css()

返回CSS属性

css("propertyname")

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("#p2").css("background-color"));
});
});
</script>
</head>
<body>
<h2>我心在南朝</h2>
<p id=p1 style="background-color:#ff0000">田野上</p>
<p id=p2 style="background-color:#00ff00">红花盛开</p>
<p id=p3 style="background-color:#0000ff">玲珑剔透</p>
<button>css()</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

设置CSS属性

css("propertyname","value");

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>我心在南朝</h2>
<p style="background-color:#ff0000">田野上</p>
<p style="background-color:#00ff00">红彤彤的花儿</p>
<p style="background-color:#0000ff">玲珑剔透</p>
<p>我心在南朝</p>
<button>设置CSS属性</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

设置多个CSS属性

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery——尺寸

  • width():设置或返回元素的宽度(不包括内边距、边框或外边距)
  • height():设置或返回元素的高度(不包括内边距、边框或外边距)
  • innerWidth()方法返回元素的宽度(包括内边距)
  • innerHeight()方法返回元素的高度(包括内边距)
  • outerWidth()方法返回元素的宽度(包括内边距和边框)
  • outerHeight()方法返回元素的高度(包括内边距和边框)
  • outerWidth(true)方法返回元素的宽度(包括内边距、边框、外边距)
  • outerHeight(true)方法返回元素的高度(包括内边距、边框、外边距)
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="innerWidth of div: " + $("#div1").innerWidth() + "</br>";
txt+="innerHeight of div: " + $("#div1").innerHeight() + "</br>"
txt+="Outer width: " + $("#div1").outerWidth() + "</br>"
txt+="Outter height: " + $("#div1").outerHeight() + "</br>";
txt+="Outer width: " + $("#div1").outerWidth(true) + "</br>"
txt+="Outter height: " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示div尺寸</button>
</body>
</html>

运行结果:

jQuery实现获取及设置CSS样式操作详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
jQuery实现表格隔行换色
Sep 01 #jQuery
You might like
PHP 身份证号验证函数
2009/05/07 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php数组编码转换示例详解
2014/03/11 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python和Go语言的区别总结
2019/02/20 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
婚礼主持结束词
2014/03/13 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers