使用JS動態(tài)顯示文本
更新時間：2017年09月09日 10:38:17 作者：Lawliet_ZMZ
這篇文章主要為大家詳細介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS動態(tài)顯示文本的具體代碼，供大家參考，具體內容如下
index.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" >
<title>頁面（HTML5）</title>
<!-- 通過鏈接的方式使用 CSS -->
<link rel="stylesheet" href="css/master.css" rel="external nofollow" />
<script src="js/main.js" charset="utf-8"></script>
</head>
<body>
<!-- HTML5 語義標簽 -->
<header>
time is long, life is short
</header>
<main>
<aside class="">
aside
</aside>
<article class="">
<input id="info" placeholder="輸入內容">
<!-- <input type="button" value="添加"> -->
<button onclick="show()" type="button" name="button">添加</button>
<h1 id="result">顯示</h1>
</article>
</main>
<footer>Copyright (c) 2016 Copyright Holder All Rights Reserved.</footer>
</body>
</html>
main.js:
// 定義函數(shù)
function show() {
// 獲得id為info的input標簽的內容
var a = document.getElementById('info').value;
// 顯示，在id為result處動態(tài)顯示（清除舊的顯示新的）
document.getElementById('result').innerText = a;
}
show函數(shù)封裝在專門存放JS腳本代碼的文件夾main.js，function是屬于JavaScript的腳本語言函數(shù)。。。function是JavaScript語言中的關鍵詞，也就是聲明一個函數(shù)時使用的。
demo：
但是這個顯示沒有對齊輸入框，可在CSS樣式文件master.css中添加如此：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
這篇文章主要介紹了JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的相關資料,需要的朋友可以參考下2016-08-08
最近在工作中遇到一個需求,可以自動對比兩個數(shù)的大小,下面這篇文章主要給大家介紹了關于微信小程序比較兩個數(shù)大小的實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了js實現(xiàn)感應鼠標圖片透明度變化的方法,涉及javascript鼠標操作及css修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了使用JS編寫的隨機抽取號碼的小程序功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-08-08
下面小編就為大家分享一篇使用百度地圖實現(xiàn)地圖網(wǎng)格的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Javascript中的作用域，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
經(jīng)常在做app的時候,會有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關于uniApp實現(xiàn)熱更新的思路與詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
javascript實現(xiàn)禁止復制網(wǎng)頁內容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實現(xiàn)禁止復制頁面內容的方法，非常的實用，有需要的小伙伴可以參考下。2015-12-12
這篇文章主要簡單介紹了Javascript Base64 加密解密的使用方法，有需要的小伙伴參考下2014-12-12