您的位置：首页 > Web前端 > JQuery

jQuery控制页面样式的变化

2017-04-23 18:08 225 查看

1**.jquery框架提供全部css3下的选择器，使用toggleClass方法可以轻松来回切换页面制定元素的样式，而不用考虑浏览器兼容问题**

2.代码（主要实现功能，切换页面显示内容样式）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式切换</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<style type="text/css">
.divDefault{
width:260px;
font-size:10pt;
padding:5px;
}
.divClick{
width:260px;
border:soild 1px #666;
font-size:6px;
background-color:#eee;
padding:5px;
}
</style>
<script type="text/javascript">
$(function(){
$(".divDefault").click(function(){
$(this).toggleClass("divClick").html("点击后样式");
});
});
</script>
</head>
<body>
<div class="divDefault">点击前样式</div>
</body>
</html>

总结：

width：宽度

font-size:字体大小

padding：外边距大小

border:边框样式

background-color:背景颜色

toggleClass()方法实现样式的来回切换,html()方法实现页面页面增加dom元素,样式，字体以及组块。addClass方法实现页面增加样式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航