功能描述

在新建的页面中增加一个文本框“txtContent”和一个按钮“请点击我”；当单击按钮时。通过页面中加入的JavaScript脚本获取为文本框中的内容，并显示在页面上。

实现代码

HTML

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>脚本元素的使用</title>

    <link href="css/css1.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" async="true">

        function Btn_Click(){

            var strTxt = document.getElementById("txtContent").value;

            var strDiv = document.getElementById("divShow");

            strDiv.style.display="block";

            strDiv.innerHTML="您输入的字符是："+strTxt;

        }

    </script>

    <noscript>您的浏览器不支持javascript</noscript>

</head>

<body>

<input type="text" id="txtContent" class="inputtxt"/>

<input type="button" value="请点击我" class="inputbtn" onclick="Btn_Click();"/>

<div id = "divShow" class="divShow"></div>

</body>

</html>

CSS

@charset "utf-8"

/*CSS Document*/

body{

	font-size:14px;

}

.inputbtn {

	border:solid 1px #ccc;

	background-color:#eee;

	line-height:18px;

	font-size:12px;

}

.inputtxt{

	border:solid 1px #ccc;

	line-height:18px;

	font-size:12px;

}

.divShow{

	font-size:18px;

	font-weight:blod;

	line-height:28px;

	background:green;

}

页面效果

在本实例的<script>元素中，设置async属性设置的值为true,即允许脚本在页面解析时异步执行，在很大程度上加速页面加载速度。

【HTML5】元素<script>与<noscript>的使用的更多相关文章

  1. HTML5元素标记释义

    HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...

  2. HTML5元素背景知识

    目录 HTML5元素背景知识 语义与呈现分离 元素选用原则 少亦可为多 别误用元素 具体为佳,一以贯之 对用户不要想当然 元素说明体例 ol元素 元素速览 文档和元数据元素 文档和元数据元素 文本元素 ...

  3. html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  4. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  5. html5.js让IE（包含IE6）支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

  6. 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  7. 让更多浏览器支持html5元素的简单方法

    当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...

  8. 如何让旧版IE浏览器认识HTML5元素

    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...

  9. 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

随机推荐

  1. 推荐几个好用的PHP集成开发环境

    (转自:http://blog.sina.com.cn/s/blog_5bd6b45101011bu2.html ) 分类: PHP PHP新手在准备正式开始写PHP代码的时候,不幸的是被PHP的开发 ...

  2. kvm虚拟机最佳实践系列1-kvm宿主机准备

    KVM宿主机配置 系统环境:ubuntu16, bond0 业务网口 bond1 管理网口+存储网口 安装KVM环境支持 sudo apt-get install qemu-kvm sudo apt- ...

  3. Pom报错

    maven的pom报plugins错误的解决方法 maven的pom报plugins错误的解决方法. 引用 Failure to transfer org.apache.maven.plugins:m ...

  4. ros结合catkin_make和qtcreator

    首先是ros官网关于IDE的教程: http://wiki.ros.org/IDEs#QtCreator 1.qtcreator安装 从官网上下载.run文件, https://info.qt.io/ ...

  5. Curl请求方法封装

    /** * GET请求 * @param $url * @return bool|mixed */ function http_get($url) { $oCurl = curl_init (); i ...

  6. 基于最新友盟开发文档，集成友盟分享功能，赋demo

    集成准备 获取Appkey 快速集成 获取SDK,页面截图: 下载后打开 导入jar和res 添加回调Activity 微信 在包名目录下创建wxapi文件夹,新建一个名为WXEntryActivit ...

  7. 解析 Lambda 表达式

    我们先创建一个表达式树: Expression<Func<int, int, int>> expression = (a,b) => a + b; 我们的例子是一个Exp ...

  8. selenium IE自动化问题汇总

    驱动下载:http://selenium-release.storage.googleapis.com/index.html 没有修改IE的保护模式设置导致,通常看到报错信息如下: selenium. ...

  9. Python的程序结构[8] -> 装饰器/Decorator -> 装饰器浅析

    装饰器 / Decorator 目录 关于闭包 装饰器的本质 语法糖 装饰器传入参数 1 关于闭包 / About Closure 装饰器其本质是一个闭包函数,为此首先理解闭包的含义. 闭包(Clos ...

  10. Jmeter插件之PerfMon监控插件使用说明

    PerfMon是Jmeter用来监控系统资源的一款插件,可以用来监控系统的cpu.内存.I/O等性能指标. 首先是Jmeter的插件安装,需要先下载JMeter Plugins Manager这个插件 ...