使用JS動態(tài)顯示文本
更新時間：2017年09月09日 10:38:17 作者：Lawliet_ZMZ
這篇文章主要為大家詳細介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS動態(tài)顯示文本的具體代碼，供大家參考，具體內(nè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="輸入內(nèi)容">
<!-- <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標簽的內(nèi)容
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語言中的關(guān)鍵詞，也就是聲明一個函數(shù)時使用的。
demo：
但是這個顯示沒有對齊輸入框，可在CSS樣式文件master.css中添加如此：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了微信小程序之ES6與事項助手的功能實現(xiàn)，具有一定的參考價值，有興趣的同學可以了解一下。2016-11-11
這篇文章主要介紹了解決echarts官網(wǎng)打不開訪問失敗的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
delete 運算符 從對象中刪除一個屬性，或從數(shù)組中刪除一個元素。2009-01-01
JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了微信小程序云開發(fā)之云函數(shù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
利用JavaScript實現(xiàn)防抖節(jié)流函數(shù)的示例代碼
在開發(fā)中我們經(jīng)常會遇到一些高頻操作，比如：鼠標移動，滑動窗口，鍵盤輸入等等，節(jié)流和防抖就是對此類事件進行優(yōu)化，降低觸發(fā)的頻率，以達到提高性能的目的。本文就教大家如何實現(xiàn)一個讓面試官拍大腿的防抖節(jié)流函數(shù)，需要的可以參考一下2022-08-08
這篇文章主要介紹了通過偽協(xié)議解決父頁面與iframe頁面通信的問題,需要的朋友可以參考下2015-04-04
javascript的onchange事件與jQuery的change()方法比較
本來是想添加文本框文本內(nèi)容改變事件動作的，結(jié)果找了許多這方面的javascript代碼都不如意。2009-09-09