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

jquery的样式操作，类操作（添加删除 css）

2016-11-21 19:07 423 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
<script src = jquery-1.11.1.js></script>
<script>
$(function () {

//-------------------------------样式操作方法--------------------------------

//样式操作方法1(设置样式)：  css(json);
//            $("div").css({"width":100,"height":100,"background-color":"pink"});

//样式操作方法2(设置样式)：  css(属性，值);
$("div").css("background-color","red");

//样式操作方法2(获取样式)：  css(属性);
//获取的时候如果有很多，那么获取jquery对象中的第一个
alert($("div").css("width"));

//------------------类操作添加和删除、切换、判断----------------------------------
$("button").eq(0).click(function () {
//添加类
$("div").addClass("current");
//判断类
alert($("div").hasClass("current"));//has是have的单三 返回bool类型
});

$("button").eq(1).click(function () {
//删除类
$("div").removeClass("current");
//判断类
alert($("div").hasClass("current"));//has是have的单三
});
//alert($("div").hasClass("current"));
// jquery对象中有一个带有类名的也是true，所有都不带才是false；
})

</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

jquery的样式操作，类操作（添加 删除 css）

jquery的样式操作，类操作（添加删除 css）