javascript内嵌样式与外联样式怎么做？

时间：2020-05-01 14:24:44 阅读：172 评论：0 收藏：0 [点我收藏+]

标签：s函数内容 random cli nbsp 设定 document div 前端

对于前端初学者，个人JS样式常用的有两种：内嵌样式，外联样式；下面通过一个简单的鼠标点击出现设定的验证数字为例进行演示；

先看下效果：

鼠标点击前效果：

技术图片

鼠标点击后效果：

图中的技术图片这个ojbk是我js函数设定的

下面展示我的js的内嵌样式：

我的内嵌js代码：

<script>  //内嵌样式
        function random()
        {
            document.getElementById("random").innerHTML = "ojbk";
        }
</script>

html中调用js内嵌样式代码：

 <button type="button" onclick="random()" class="buttonstyle1">点击验证</button>

下面展示我的js的外联样式：

我的外联js样式表代码：

技术图片文件内容：

function random()
{
    document.getElementById("random").innerHTML =‘ojbk‘;
}

在HTML中引入js外联代码（放在head标签中，对整个页面起作用）：

<head>
    <meta charset="UTF-8">
    <title>简易验证码</title>
    <script type="text/javascript" rel="script" src="javascript.js"></script> //此处注意你的js文件的相对路径
</head>