Sử dụng Chuyển đổi thuộc tính trong JavaScript để đặt thuộc tính CSS. Bạn có thể thử chạy đoạn mã sau để trả về thuộc tính CSS mà hiệu ứng chuyển đổi dành cho JavaScript -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 300px;
width: 400px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
transition: all 3s;
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>Hover over DIV2</p>
<button onclick = "display()"> Set </button>
<div id = "div1">DIV1
<div id="div2">DIV2</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transitionProperty = "width,height";
}
</script>
</body>
</html>