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

上面是刚开始的执行效果，相应的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";

}

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

HTML引入JS、CSS的各种方法的更多相关文章

  1. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  2. 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  3. 配置springMVC之后,引入js,css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  4. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  5. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  6. Yii 引入js css jquery 执行操作

    在布局中引用通用到js,或者css: <?php Yii::app()->clientScript->registerCoreScript('jquery');?>  //注意 ...

  7. Thymeleaf(一)---引入js/css文件

    th:href="@{/static/css/style.css}" th:src="@{/static/js/thymeleaf.js}" index.htm ...

  8. Maven项目WEB-INF/views无法引入js,css静态文件解决方法

    web.xml针对文件后缀配置以下,对客户端请求的静态资源如图片.JS文件等的请求交由默认的servlet进行处理 <servlet-mapping> <servlet-name&g ...

  9. springMVC引入js,css文件404

    在web.xml中配置静态资源文件过滤 <!--静态文件引入--> <servlet-mapping> <servlet-name>default</serv ...

  10. Spring Boot 2.x引入JS,CSS 失效问题

    我的SpringBoot版本是2.0,启动后发现页面奇丑无比: 看下目录结构: SpringBoot默认扫描Static文件夹下的文件,这里把CSS,JS以及图片文件都放在了asserts文件夹下. ...

随机推荐

  1. MySQL 主从复制问题

    导致SQL线程故障原因分析及解决方案 原因 1. 版本差异,参数设定不同,比如:数据类型的差异,SQL_MODE影响 2. 要创建的数据库对象已经存在 3. 要删除或修改的对象不存在 4. DML语句 ...

  2. Spring学习的第三天

    问题分析:在刚开始进行银行转账案例时,会获取四个连接,分别是查询接入.转出账户.更新转入.转出账户.这样会使转账不同步,如果某一处出现异常,前面的代码执行了,而后面的更新却没执行,导致一个账户加钱而另 ...

  3. dependencyManagement

    maven中的继承是在子类工程中加入父类的groupId,artifactId,version并用parent标签囊括 depenentManagement标签作用: 当父类的pom.xml中没有de ...

  4. 《Web Development with Go》Middleware之共享数据

    这个库值得学, 好像写起来越来越溜 package main import ( "fmt" "log" "net/http" //" ...

  5. R-5 相关分析-卡方分析

    本节内容: 1:相关分析 2:卡方分析 一.相关分析 相关系数: 皮尔逊相关系数:一般用来计算两个连续型变量的相关系数. 肯德尔相关系数:一个连续一个分类(最好是定序变量) 斯皮尔曼相关系数:2个变量 ...

  6. ADB常用命令（一）

    转自:https://blog.csdn.net/qq_26552691/article/details/81348222 一.操作前请确认电脑上已配置好ADB环境.可在CMD命令行输入adb,如果出 ...

  7. python的pstuil模块总结

    import psutil print(dir(psutil)) # 查看逻辑cpu的个数 print(psutil.cpu_count()) # 查看物理cpu的个数 print(psutil.cp ...

  8. [Spring cloud 一步步实现广告系统] 7. 中期总结回顾

    在前面的过程中,我们创建了4个project: 服务发现 我们使用Eureka 作为服务发现组件,学习了Eureka Server,Eureka Client的使用. Eureka Server 加依 ...

  9. Implement Property Value Validation in the Application Model 在应用程序模型中实现属性值验证

    In this lesson, you will learn how to check whether or not a property value satisfies a particular r ...

  10. Java 类集初探

    类集 类集:主要功能就是Java数据结构的实现(java.util) 类集就是动态对象数组(链表也是动态数组) Collection 接口* Collection是整个类集之中单值保存的最大 父接口 ...