JS代码在Html中的位置分布与调用

版权声明:转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/85223308

JS由EcmaScript、Dom、Bom组成

EcmaScript:语法和基本对象、Dom:文档对象模型,描述处理网页内容的方法和接口

Bom:Browser

出现位置:

//JS出现在行间
<input type="button" id="btn" value="按钮" style="background:#f00" onclick="alert(1)"/>
//JS内嵌
<head>
<style>
    #btn{background:#f00;}
</style>
</head>
<body>
    <input type="button" id="btn" value="按钮"/>
    <script>
        document.getElementById("btn").onclick=function(){
            alert(1);}
    </script>
</body>
//JS外链

//style1.js文件
document.getElementById("btn").onclick=function(){
    alert(1);}

//调用style1.js文件
<body>
    <input type="button" id="btn" value="按钮"/>
    <script src="style1.js"></script>
</body>

举个具体的例子说明下:

要求:1.点击页面按钮,按钮背景变成黄色  2.点击页面按钮,改变div的宽度和高度

也就是执行两个JS事件

<script>
window.onload=function(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("btn").style.background="yellow";
        document.getElementById("box").style.width="200px";
        document.getElementById("box").style.height="200px"; }
}
</script>

猜你喜欢

转载自blog.csdn.net/weixin_38134491/article/details/85223308