document.write()及其輸出內(nèi)容的樣式、位置控制

更新時(shí)間：2013年08月12日 15:57:46 作者：

document.write（），用于簡(jiǎn)單的打印內(nèi)容到頁面上，可以逐字打印你需要的內(nèi)容，既然可以輸出變量，肯定會(huì)想要去控制下變量的顯示，比如位置以及樣式

JS中的最基本的命令之一：document.write（），用于簡(jiǎn)單的打印內(nèi)容到頁面上，可以逐字打印你需要的內(nèi)容——document.write("content"),這里content就是需要輸出的內(nèi)容；當(dāng)然還有一種情況，需要輸出JS之中比如變量等等變化的東西，那么就需要用document.write(+variable);當(dāng)然variable就是你想要輸出的變量。

既然可以輸出變量，肯定會(huì)想要去控制下變量的顯示，比如位置以及樣式。第一種控制方法是應(yīng)用內(nèi)部添加樣式的方法，比如

document.write("<font style>=font-size:20px;font-family= Helvetica;"content"</font>"這樣，不過如果里面需要添加的樣式太多，那么不僅顯得臃腫，而且修改起來也不會(huì)方便。

這種情況下肯定用選擇器肯定會(huì)感覺爽一些。不過由于用選擇器的時(shí)候要用到各種雙引號(hào)單引號(hào)，所以在使用的時(shí)候應(yīng)該注意防止雙引號(hào)和單引號(hào)的提早匹配，我避免的方法是用 \" 去提醒瀏覽器不要過早的匹配，例子如下：

document.write("<div id=\"ok\">"+percentage+"</div>");

這里定義了一個(gè)名叫ok的ID選擇器去控制樣式，因id名需要用雙引號(hào)括起來，所以為了避免和前面的雙引號(hào)匹配，就用 \" 給它聲明一下，然后在CSS文件里面

#ok{style;}

就可以去定義自己想要的樣式和位置了。

您可能感興趣的文章:

相關(guān)文章

微信小程序中wxs文件的一些妙用分享
wxs相當(dāng)于一個(gè)獨(dú)立模塊,相當(dāng)于一個(gè)獨(dú)立出來的module對(duì)象,通過module.exports向外暴露,在文件中引入即可使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序中wxs文件的一些妙用,需要的朋友可以參考下
2022-01-01
JavaScript之AOP編程實(shí)例
這篇文章主要介紹了JavaScript的AOP編程,以實(shí)例形式分析了javascript面向切面編程的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法
這篇文章主要給大家介紹了關(guān)于js中對(duì)象與對(duì)象創(chuàng)建方法的各種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
微信小程序網(wǎng)絡(luò)層封裝的實(shí)現(xiàn)（promise, 登錄鎖）
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)層封裝（promise, 登錄鎖），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
詳解用原生JavaScript實(shí)現(xiàn)jQuery的某些簡(jiǎn)單功能
本篇文章主要對(duì)用原生JavaScript實(shí)現(xiàn)jQuery的某些簡(jiǎn)單功能進(jìn)行詳細(xì)全面的講解，具有很好的參考價(jià)值，需要的朋友一起來看下吧
2016-12-12
使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
這篇文章主要介紹了使用bootstrap validator的remote驗(yàn)證器驗(yàn)證經(jīng)驗(yàn)分享(推薦)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
JavaScript實(shí)現(xiàn)煙花綻放動(dòng)畫效果
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)煙花綻放動(dòng)畫效果，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-08-08
JS實(shí)現(xiàn)固定時(shí)間點(diǎn)執(zhí)行某任務(wù)的代碼示例
在Web前端開發(fā)中,有時(shí)我們需要在特定的時(shí)間點(diǎn)執(zhí)行某些任務(wù),例如每日定時(shí)發(fā)送數(shù)據(jù)報(bào)告、每小時(shí)更新一次用戶界面等,JavaScript 提供了多種方法來實(shí)現(xiàn)這一需求,本文將詳細(xì)介紹如何使用這些工具和技術(shù),并通過豐富的代碼示例展示其具體應(yīng)用,需要的朋友可以參考下
2025-02-02
JS實(shí)現(xiàn)一個(gè)列表中包含上移下移刪除等功能
一個(gè)項(xiàng)目，包括了一個(gè)列表頁其中包括在列表中實(shí)現(xiàn)上移，下移，刪除等功能，為了用戶體驗(yàn)，操作均使用JS實(shí)現(xiàn)
2014-09-09
IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10