javescrip内嵌样式与外联样式怎么做?
对于前端初学者,个人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内嵌样式与外联样式怎么做?的更多相关文章
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- MetaBase使用iframe内嵌到Vue页面样式优化
Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...
- 微信内嵌浏览器sessionid丢失问题,nginx ip_hash将所有请求转发到一台机器
现象微信中打开网页,图形验证码填写后,经常提示错误,即使填写正确也会提示错误,并且是间歇性出现. 系统前期,用户使用主要集中在pc浏览器中,一直没有出现这样的问题.近期有部分用户是在微信中访问的,才出 ...
- [转]Traits 编程技法+模板偏特化+template参数推导+内嵌型别编程技巧
STL中,traits编程技法得到了很大的应用,了解这个,才能一窥STL奥妙所在. 先将自己所理解的记录如下: Traits技术可以用来获得一个 类型 的相关信息的. 首先假如有以下一个泛型的迭代器类 ...
- Winform/WPF中内嵌BeetleX的HTTP服务
在新版本的BeetleX.FastHttpApi加入了对netstandard2.0支持,如果程序基于.NetFramework4.6.1来构建WinForm或WPF桌面程序的情况下可以直接把Beet ...
- 《Programming WPF》翻译 第5章 2.内嵌样式
原文:<Programming WPF>翻译 第5章 2.内嵌样式 每一个“可样式化”的WPF元素都有一个Style属性,可以在内部设置这个属性--使用XAML属性-元素的语法(在第一章讨 ...
- 13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- css的三种使用方式:行内样式,内嵌样式,外部引用样式
三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- E1. String Coloring (easy version)(贪心)
E1. String Coloring (easy version) time limit per test 1 second memory limit per test 256 megabytes ...
- HDU-1421-搬寝室(01背包改编版)
搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3号楼,因为10号要封楼了.看着寝室里的n件物品,xhd开始发呆,因为n是一个小于2000的整数,实在是太 ...
- 1051 Pop Sequence (25分)
Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...
- VS2019中QT连接及使用
23:27:43 2019-08-09 qt连接VS 连接前提是在下载qt的时候将 MSVC 2017装上 点击扩展 选择管理扩展 搜索qt 选择下载 之后下载结束并重新打开后 会弹出一个 QT o ...
- AJAX对数据库增删改查实例
前端代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title&g ...
- Nagios监控服务
Nagios监控服务 案例1:常用系统监控命令 案例2:搭建nagios监控服务器 案例3:配置文件及插件使用 案例4:监控远程主机的公有数据 案例5:监控远程主机的私有数据 1 案例1:常用系统监控 ...
- Hadoop(九):Shuffle组件
重温MR整体流程 工作流程 开始执行输入(InputFormat),先对文件进行分片,然后读取数据输入到Map中. Mapper读取输入内容,解析成键值对,1行内容解析成1个键值对,每个键值对调用一次 ...
- 家庭版记账本app进度之关于listview显示账单,并为其添加点击事件
这个主要学习是关于listview的学习. 怎样去自定义adapter,以及使用.自己创建文件,还有就是为listview的每一个子控件添加点击事件. 在整个过程中收获到的知识点如下: 一.对于数据库 ...
- node+express+mysql实现简单的数据增删改查
前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp 新建一个以ejs为模板的expre ...
- MAC 系统java开发环境搭建教程
1.在安装JDK之前,先查看下自己电脑是否已经安装了JDK. 打开终端,输入java -version并回车. 从上图中可以看出我们已安装了,JDK 8.如果这个版本是你需要的版本,可直接看4 ...