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

上面是刚开始的执行效果，相应的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. python中 遇到的读取坑2.7和3.6版本的问题

    2.7读取,需要使用io.open 3.x使用open 使用io.open的时候路径需要使用\\ 目前io.open的文件名不能为中文

  2. Python 获取MD5加密值

    Python 获取MD5加密值方法封装 import hashlib def get_md5(s): """获取MD5加密值 :param s: 需要加密的字符串 :re ...

  3. 数组类的创建——StaticArray.h

    创建好的基于顺序存储结构的线性表存在两个方面的问题:1)功能上的问题:数组操作符的重载带来的问题,有可能线性表被无用为数组了,线性表被当做数组来使用了.2)效率方面的问题 本篇博客就要解决功能上的问题 ...

  4. vuex——action,mutation,getters的调用

    一.子模块调用根模块的方法 mutation调用  context.commit('clearloginInfo',{key_root:data},{root:true}); action调用  co ...

  5. LeetCode 第70题动态规划算法

    导言 看了 动态规划(https://www.cnblogs.com/fivestudy/p/11855853.html)的帖子,觉得写的很好,记录下来. 动态规划问题一直是算法面试当中的重点和难点, ...

  6. 深度学习VGG16模型核心模块拆解

    原文连接:https://blog.csdn.net/qq_40027052/article/details/79015827 注:这篇文章是上面连接作者的文章.在此仅作学习记录作用. 如今深度学习发 ...

  7. Jedis & spring-data-redis

    当我们了解了redis的五大数据类型,手动去敲一敲每个数据类型对应的命令,无论是再来看jedis,还是spring-data-redis都是很轻松的,他们提供的API都是基于原生的redis命令,可读 ...

  8. Git - Git基本常用命令

    Git基本常用命令 mkdir:         XX (创建一个空目录 XX指目录名) pwd:          显示当前目录的路径. git init          把当前的目录变成可以管理 ...

  9. java基础(5):流程控制语句（switch）、数组

    1. 流程控制语句(续) 1.1 选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码.例如,在程序 ...

  10. Linux 磁盘分区、挂载

    一.分区介绍 mbr分区: 1.最多支持四个主分区 2.系统只能安装在主分区上 3.扩展分区要占一个主分区 4.mbr最大只支持2TB,但拥有最好的兼容性 gpt分区: 1.支持无限多个主分区(但操作 ...