<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test1{
width: 50px;
height: 50px;
background-color: #ccc;
top: 0;
left: 0;
}
div.on{
background-color: red;
}
div.active {
position: fixed;
animation-name: move;
animation-duration: 10s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes move{
0% {
left: 0;
top: 0;
}
100% {
left: 500px;
top: 500px;
}
}
.test2 {
width: 50px;
height: 50px;
margin-top: 5000px;
background-color : yellow;
}
</style>
</head>
<boby>
<div class="test1"></div>
<div class="test2"></div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(".test1").on("click", function() {
$(this).addClass("on"); //addClass를 많이 씀
//$(this).toggleClass("on");
//$(this).removeClass("on"); //removeClass는 어떤 클래스를 지울지 명시해주는 게 좋음
//var a= $(this).hasClass("test1"); //test1 클래스를 가지고 있는지
//console.log(a);
});
//$(".test1").toggleClass("active");
var w = $(".test1").width();
// 선택자 너비 가져오기
var h = $(".test1").height();
$(".test1").width(h);
$(".test1").height(w);
var b = $(".test1").css("width");
//offset().top;
var c = $(".test2").offset().top; // 문서 최상단과의 거리
$(".test2").text(c);
$(window).on("scroll", function () {
var a = $(this).scrollTop();
console.log(a);
});
$(".test2").on("click", function() {
$("html, body").animate({
"scrollTop" : 0
})
});
</script>
</boby>
</html>
Engineering is the closest thing to magic that exists in the world.