<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 100px;
height: 260px;
}
div.whiteborder{ /*前面是标签名(用来限制给谁使用),后面是标签选择器*/
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script src="jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
var $divEle = $('div:first');
$('#btn01').click(function () {
//addClass() 向被选元素添加一个或多个类
$divEle.addClass('redDiv blueBorder');
});
$('#btn02').click(function () {
//removeClass() 向被选元素删除一个或多个类
$divEle.removeClass('redDiv');
});
$('#btn03').click(function () {
//toggleClass() 对被选元素进行添加删除类的切换操作
$divEle.toggleClass('redDiv');
});
$('#btn04').click(function () {
//offset() 返回第一个匹配元素相当于文档的位置
var pos = $divEle.offset();
console.log(pos);
$divEle.offset({
top:100, /*按照当前窗口大小进行调整*/
left:50
});
});
});
</script>
</head>
<body>
css样式操作
<!--
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除没有就添加
offset() 获取和设置元素的坐标
-->
<table align="center">
<tr>
<td>
<div class="border"></div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01">
<input type="button" value="removeClass()" id="btn02">
<input type="button" value="toggleClass()" id="btn03">
<input type="button" value="offset()" id="btn04">
</div>
</td>
</tr>
</table>
</body>
</html>
web基础学习笔记(十九)之jquery-css的样式操作
最新推荐文章于 2024-04-04 13:09:29 发布