换样式
<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>改變div的樣式</title>
?? ?<style type="text/css">
?? ?#div1{
?? ??? ?width:100px;height:100px;background:red;
?? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?
?? ??? ?function toGreen(){
?? ??? ??? ?var oDiv1=document.getElementById('div1');
?? ??? ??? ?oDiv1.style.width='200px';
?? ??? ??? ?oDiv1.style.height='200px';
?? ??? ??? ?oDiv1.style.background='green';
?? ??? ?}
?? ??? ?function toRed(){
?? ??? ??? ?var oDiv1=document.getElementById('div1');
?? ??? ??? ?oDiv1.style.width='100px';
?? ??? ??? ?oDiv1.style.height='100px';
?? ??? ??? ?oDiv1.style.background='red';
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<div id="div1" οnmοuseοver="toGreen()"οnmοuseοut="toRed()"></div>
</body>
</html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>改變div的樣式</title>
?? ?<style type="text/css">
?? ?#div1{
?? ??? ?width:100px;height:100px;background:red;
?? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?
?? ??? ?function toGreen(){
?? ??? ??? ?var oDiv1=document.getElementById('div1');
?? ??? ??? ?oDiv1.style.width='200px';
?? ??? ??? ?oDiv1.style.height='200px';
?? ??? ??? ?oDiv1.style.background='green';
?? ??? ?}
?? ??? ?function toRed(){
?? ??? ??? ?var oDiv1=document.getElementById('div1');
?? ??? ??? ?oDiv1.style.width='100px';
?? ??? ??? ?oDiv1.style.height='100px';
?? ??? ??? ?oDiv1.style.background='red';
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<div id="div1" οnmοuseοver="toGreen()"οnmοuseοut="toRed()"></div>
</body>
</html>
?
?
?
查看范例
轉載于:https://www.cnblogs.com/Mr-W/p/6288969.html
總結
- 上一篇: jquery 自动触发事件 trigge
- 下一篇: P4语言编程快速开始 实践二