对于前端初学者，个人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>

HTML调用外联js代码：

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

注释：这个其实和上面那个HTML中调用的代码是一样的！

注意：在实训中，要注意你的js文件的相对路径，路径错误将无法调用！！！  JS的调用和CSS很相似。

javescrip内嵌样式与外联样式怎么做？的更多相关文章

  1. 你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  2. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  3. MetaBase使用iframe内嵌到Vue页面样式优化

    Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...

  4. 微信内嵌浏览器sessionid丢失问题，nginx ip_hash将所有请求转发到一台机器

    现象微信中打开网页,图形验证码填写后,经常提示错误,即使填写正确也会提示错误,并且是间歇性出现. 系统前期,用户使用主要集中在pc浏览器中,一直没有出现这样的问题.近期有部分用户是在微信中访问的,才出 ...

  5. [转]Traits 编程技法+模板偏特化+template参数推导+内嵌型别编程技巧

    STL中,traits编程技法得到了很大的应用,了解这个,才能一窥STL奥妙所在. 先将自己所理解的记录如下: Traits技术可以用来获得一个 类型 的相关信息的. 首先假如有以下一个泛型的迭代器类 ...

  6. Winform/WPF中内嵌BeetleX的HTTP服务

    在新版本的BeetleX.FastHttpApi加入了对netstandard2.0支持,如果程序基于.NetFramework4.6.1来构建WinForm或WPF桌面程序的情况下可以直接把Beet ...

  7. 《Programming WPF》翻译 第5章 2.内嵌样式

    原文:<Programming WPF>翻译 第5章 2.内嵌样式 每一个“可样式化”的WPF元素都有一个Style属性,可以在内部设置这个属性--使用XAML属性-元素的语法(在第一章讨 ...

  8. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  9. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. 【tensorflow2.0】处理时间序列数据

    国内的新冠肺炎疫情从发现至今已经持续3个多月了,这场起源于吃野味的灾难给大家的生活造成了诸多方面的影响. 有的同学是收入上的,有的同学是感情上的,有的同学是心理上的,还有的同学是体重上的. 那么国内的 ...

  2. MTK Android [输入法]客制化系统默认输入法-搜狗输入法

    1.frameworks/base/packages/SettingsProvider/res/values/defaults.xml <!--Sogou input method is use ...

  3. 五个简单的shell脚本

    1.编写shell脚本 ex1.sh,提示用户输入用户名,并判断此用户名是否存在. (提示:利用read.grep和/etc/passwd) #!/bin/bash echo "请输入用户名 ...

  4. SpringMVC框架详细教程(二)

    创建动态Web项目 1.创建动态Web项目: 打开Eclipse,在Package Explorer右击,创建项目,选择动态Web项目(Dynamic Web Project). 填写项目名称,并选择 ...

  5. leetcode c++做题思路和题解（5）——堆的例题和总结

    堆和优先队列 堆的简介, 是一种二叉树, 有最大堆和最小堆miniheap. 通常用于构建优先队列. 0. 目录 数据流中的第K大元素 1. 数据流中的第K大元素 数据流中的第K大元素 复杂度为log ...

  6. Java正则表达式基础知识及实例说明

    众所周知,在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂,如果用纯编码方式解决,往往会浪费程序员的时间及精力.因此,学习及使用正则表达式,便成了解决这一矛 ...

  7. bootstrapTable随机改变列颜色

    { title: '运单编号', field: 'waybillNumber', align: 'center', valign: 'middle', cellStyle: function (val ...

  8. C语言冒泡排序法分析及代码实现

    冒泡排序法: 所谓冒泡排序法,就是对一组数字进行从大到小或者从小到大排序的一种算法.具体方法是,相邻数值两两交换.从第一个数值开始,如果相邻两个数的排列顺序与我们的期望不同,则将两个数的位置进行交换( ...

  9. C - Sigma Function LightOJ - 1336 (数论)

    一个让人脑洞大开的题. 题目大意比较简单,询问[1,n]有多少个数其因子和为偶数. 因子分解定理中求因子和的公式是 f(n)=(1+p1+p1^2+p1^3+...+p1^a1)(1+p2+p2^2+ ...

  10. PHP函数：fopen

    fopen()  - 打开文件或者 URL. 注意:array_key_exists() 仅仅搜索第一维的键. 多维数组里嵌套的键不会被搜索到. 说明: fopen ( string $filenam ...