行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式
样式优先级:*<标签<class<ID<行间
style与className,如果先给了style行间样式,再给className不会有效果
<title>无标题文档</title> <style> #div1{width:200px;height:200px;border:1px solid #000;} .box{background:#F00;} </style> <script> function toRed(){ var oDiv=document.getElementById(‘div1‘); oDiv.className=‘box‘; } function toGreen(){ var oDiv=document.getElementById(‘div1‘); oDiv.style.background=‘green‘; } </script> </head> <body> <input type="button" value="变红" onclick="toRed()"/> <input type="button" value="变绿" onclick="toGreen()"/> <div id="div1"> </div> </body>
匿名函数 window.onload,在页面加载完成之后发生(执行) 这是btn1已经加载进来了
<title>无标题文档</title> <script> window.onload=function (){ var oBtn=document.getElementById(‘btn1‘); oBtn.onclick=function (){ alert(‘a‘); }; }; </script> </head> <body> <input id="btn1" type="button" value="按钮"/> </body>
对比代码如下:
<title>无标题文档</title> </head> <body> <input id="btn1" type="button" value="按钮"/> <script> var oBtn=document.getElementById(‘btn1‘); oBtn.onclick=function (){ alert(‘a‘); }; </script> </body>
图片上的代码运行没有预期的效果
时间: 2024-10-07 21:36:23