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

上面是刚开始的执行效果，相应的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. Redis 到底是怎么实现“附近的人”这个功能的呢？

    作者简介 万汨,饿了么资深开发工程师.iOS,Go,Java均有涉猎.目前主攻大数据开发.喜欢骑行.爬山. 前言:针对“附近的人”这一位置服务领域的应用场景,常见的可使用PG.MySQL和MongoD ...

  2. PHP 利用PHPExcel到处数据到Excel；还有导出数据乱码的解决方案。

    直接贴代码吧 PHP版本5.6.38 mysql版本5.0 //连接数据库 $mysql_server_name = "*.*.*.*"; $mysql_username=&quo ...

  3. Cnblogs图片无法上传

      2019年5月28日以前的两三个月时间,使用cnblogs原来的接口时,提示图片无法上传,空间不足,实在没办法了,自己实现了博客代理,发现上传图片时返回了503错误,只好先把图片传到其它服务器,再 ...

  4. 【oracle】ORA-06550 字符串长度限制在范围

    number(2)输入了100 就会导致异常

  5. javascript中的toString（）

    基本介绍 javascript中的toString方法是我们在写前端时经常要用的一个函数,也就是将我们的变量转换成字符串的方法. javascript中各种类型的toString方法 javascri ...

  6. Json数组（以[ ] 中括号开头）字符串转为json对象

    以 [] 开头的json数组字符串: str = "[{ "姓名":"张三", "年龄":"28" }]&qu ...

  7. Python 从入门到进阶之路（五）

    之前的文章我们简单介绍了一下 Python 的函数,本篇文章我们来看一下 Python 中的面向对象. Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是 ...

  8. Vue 从入门到进阶之路（十三）

    之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...

  9. 如何使用SpringBoot封装自己的Starter

    作者:Sans_ juejin.im/post/5cb880c2f265da03981fc031 一.说明 我们在使用SpringBoot的时候常常要引入一些Starter,例如spring-boot ...

  10. C#时间戳与时间相互转换

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...