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

上面是刚开始的执行效果，相应的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. Hackme: 1: Vulnhub Walkthrough

    下载链接: https://www.vulnhub.com/entry/hackme-1,330/ 网络扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.131 22/ ...

  2. 43.QT-访问远程SQLite数据库

    在上章42.QT-QSqlQuery类操作SQLite数据库(创建.查询.删除.修改)详解学习了如何操作SQLite,本章来学习如何访问远程SQLite 1.首先设置共享,映射(用来实现远程访问) 将 ...

  3. 基于django中间件的编程思想

    目录 前言 前期准备 importlib模块介绍 基于django中间件的编程思想 django中settings源码 配置文件的插拔式设计 基于django中间件的思想,实现功能配置 前言 在学习d ...

  4. Vim 命令常用功能详解

    Vim编辑器 文本编辑器 , 字处理器ASCIIvi:Visual Interface vim :VI iMproved 全屏编辑器,模式化编辑器vim 模式:编辑模式(命令模式)输入模式末行模式 模 ...

  5. "echo 0 /proc/sys/kernel/hung_task_timeout_secs" disable this message

    问题现象: 问题原因: 默认情况下, Linux会最多使用40%的可用内存作为文件系统缓存.当超过这个阈值后,文件系统会把将缓存中的内存全部写入磁盘, 导致后续的IO请求都是同步的. 将缓存写入磁盘时 ...

  6. 32.Java基础_异常

    JVM虚拟机默认异常处理机制 Java异常处理: 1.try...catch... 2.throw 1.try...catch... public class test{ public static ...

  7. 通过pywin32库来上传文件

    先来安装:pip install pywin32 辅助定位工具winspy下载地址:https://sourceforge.net/projects/winspyex/ 打开后是这玩意: 按住靶心拖拽 ...

  8. win10 安装cuda和cudnn

    首先通过nvidia-smi 查看自己的显卡驱动对应的cuda版本. 参考:https://blog.csdn.net/qq_40212975/article/details/89963016 再去官 ...

  9. mysql DDL 锁表

    mysql DDL 锁表 select trx_state, trx_started, trx_mysql_thread_id, trx_query from information_schema.i ...

  10. 小程序-picker组件选择数量

    <!-- detail.wxml --> <view class="picker"> <picker range="{{range}}&qu ...