onload&click

来源：互联网发布：五子棋网络对战编辑：程序博客网时间：2024/06/03 21:18

window.onload = function(){}
//bug(代码从上到下加载，因为html代码还没加载，所以加载之前获取的button为空)

<head>    <meta charset="UTF-8">    <title>jquery</title>    <style type="text/css">        #box{border: 1px solid #ccc; width: 300px;height: 200px;}    </style>    <script type="text/javascript">            var btn = document.getElementById("btn");            var div = document.getElementById("box");            btn.onclick = function () {                div.style.border = "2px solid green";                div.style.backgroundColor = "yellow";            }    </script></head><body><input type="button" value="改变样式" id="btn"><div id="box"></div></body>

//Debug 使用onload事件解决

<script type="text/javascript">        //onload只有一个        window.onload = function () {            var btn = document.getElementById("btn");            var div = document.getElementById("box");            btn.onclick = function () {                div.style.border = "2px solid green";                div.style.backgroundColor = "yellow";            }        }</script>

//onload事件在整个文档加载完成后才执行

2.添加事件

<script type="text/javascript">    //jQuery添加 click 事件     $("#btn").click(function () {         $("#box").css("border","2px solid yellow");         $("#box").css("background","green");     });    /*//JavaScript添加 click 事件    var btn = document.getElementById("btn");    var div = document.getElementById("box");    btn.onclick = function () {        div.style.border = "2px solid green";        div.style.backgroundColor = "yellow";    }*/</script>

1 0