lovecoding
/
Java0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 如果从body中搬到head中 因为代码的渲染是自上而下的 所以此时找不到btn元素 会报错
        // 如果将代码直接写在script里 代码会直接执行
        // 如果将代码写在函数里 代码会在函数被调用时执行
        function ready(){

            var d1 = document.getElementById("d1")
            d1.onclick = function(){
                // 修改元素样式中的属性值
                d1.style.backgroundColor = "red"
            }

            var btn = document.getElementById("btn1")
            // 绑定一个事件 并且编写触发逻辑
            btn.onclick = function(){
                alert("按钮单击了")
                // 手动触发事件  通过dom编程触发事件
                d1.onclick()
            }
        }
        
    </script>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<!-- 如果希望一部分代码在页面加载完成后 被调用 可以使用onload触发 -->
<body onload="ready()">
    
    <button id="btn1">按钮</button>
    <br />
    <!-- <script>
        // 使用dom获取要操作的元素
        //   通过id名字来获取元素
        var btn = document.getElementById("btn1")
        // 绑定一个事件 并且编写触发逻辑
        btn.onclick = function(){
            alert("按钮单击了")
        }
    </script> -->

    <div id="d1" class="div1">
    </div>

</body>
</html>