HTML引入JS、CSS的各种方法

时间:2024-04-15 15:16:16

直接上代码,相信大家是看得懂的,最好的办法是把代码粘过去,自己修改试试,看看效果!

 

上面是刚开始的执行效果,相应的html,js,css展示如下:

index.html

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8" />
        <title>HTML引入JS/CSS的三种方式</title>
        <!--引入外部的css文件-->
        <link rel="stylesheet" href="css/index.css" />
        
        <!--引入外部的js文件-->
        <script type="text/javascript" src="js/index.js" ></script>
        
        
        <!--在head中添加js控制-->
        <script type="text/javascript">
            function onClickB1() {
                document.getElementById("b1").innerHTML = "HEAD";
            }
        </script>
        
        
        <!--在head中添加css修饰-->
        <style type="text/css">
            #j2 {
                background-color: #808080;
            }
        </style>
        
    </head>
    
    <body bgcolor="#F5F5F5">
        <div id="j1" class="divs">
            <button id="b1" onclick="onClickB1()">在head中</button>
            <p>方式一:将js代码写在head中,如本例所示,点击按钮改变按钮的内容!</p>
            <p>
                同理,也可以将css样式写在head中,如上面的代码所示,设置j2的背景色,这里需要注意的是,其实我在外部的css文件中也设置了j2的背景色,
                所以这两处设置是冲突的,但实验证明,网页中显示的是在head中修饰的属性值,这也许就是近水楼台先得月吧!
            </p>
        </div>
        <div id="j2" class="divs"">
            <button id="b2" onclick="onClickJ2()">在body中</button>
            <p>方式二:将js代码写在body中,如本例所示,点击按钮改变div的背景色!</p>
            <p>同理,在html的body中也可以设置css样式,代码如下面所示,设置b3的文字颜色为红色。</p>
        </div>
        <div id="j3" class="divs">
            <button id="b3" onclick="gaiBian()">在外部js中</button>
            <p>方式三:将js代码写在外部js文件中,并在html文件的head中引入该js,在本例中,点击按钮改变按钮的内容,并改变div的颜色!【推荐】</p>
            <p>当然,将css通过外部文件的方式引入html是最好的,也是推荐的方式。【推荐】</p>
            
            <p style="background: red;"><strong>这里需要注意的是,和js不同的是,css可以直接写在组件的内部,例如在此,我将文字直接加粗,背景变红!</strong></p>
        </div>
        
        
        <!--在body中添加js控制-->
        <script type="text/javascript">
            function onClickJ2 () {
                document.getElementById("j2").style.background = "red";
            }
        </script>
        
        <style type="text/css">
            #b3 {
                color: red;
            }
        </style>
    </body>
</html>

index.css

.divs {
    width: 100%;
    height: 250px;
    background-color: grey;
    /*margin的属性顺序是上右下左*/
    margin: 10px 10px 5px 1px;
}

#j1 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: white;
}

#j2 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: whitesmoke;
}

#j3 {
    /*这里把上面divs中设置的背景颜色覆盖了*/
    background-color: antiquewhite;
}

index.js

function gaiBian () {
    document.getElementById("b3").innerHTML = "外部成功";
    document.getElementById("j3").style.background = "lemonchiffon";
}

三个按钮都点一遍后的效果: