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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP define函数的使用说明
2008/08/27 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
如何判断php数组的维度
2013/06/10 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Django框架封装外部函数示例
2019/05/28 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
PHP开发的一般流程
2013/08/13 面试题
出纳年终工作总结2014
2014/12/05 职场文书
安全保证书
2015/01/16 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python