document.write()及其輸出內(nèi)容的樣式、位置控制
更新時(shí)間：2013年08月12日 15:57:46 作者：
document.write（），用于簡(jiǎn)單的打印內(nèi)容到頁(yè)面上，可以逐字打印你需要的內(nèi)容，既然可以輸出變量，肯定會(huì)想要去控制下變量的顯示，比如位置以及樣式
JS中的最基本的命令之一：document.write（），用于簡(jiǎn)單的打印內(nèi)容到頁(yè)面上，可以逐字打印你需要的內(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>"這樣，不過(guò)如果里面需要添加的樣式太多，那么不僅顯得臃腫，而且修改起來(lái)也不會(huì)方便。
這種情況下肯定用選擇器肯定會(huì)感覺(jué)爽一些。不過(guò)由于用選擇器的時(shí)候要用到各種雙引號(hào)單引號(hào)，所以在使用的時(shí)候應(yīng)該注意防止雙引號(hào)和單引號(hào)的提早匹配，我避免的方法是用 \" 去提醒瀏覽器不要過(guò)早的匹配，例子如下：
document.write("<div id=\"ok\">"+percentage+"</div>");
這里定義了一個(gè)名叫ok的ID選擇器去控制樣式，因id名需要用雙引號(hào)括起來(lái)，所以為了避免和前面的雙引號(hào)匹配，就用 \" 給它聲明一下，然后在CSS文件里面
#ok{style;}
就可以去定義自己想要的樣式和位置了。
既然可以輸出變量，肯定會(huì)想要去控制下變量的顯示，比如位置以及樣式。第一種控制方法是應(yīng)用內(nèi)部添加樣式的方法，比如
document.write("<font style>=font-size:20px;font-family= Helvetica;"content"</font>"這樣，不過(guò)如果里面需要添加的樣式太多，那么不僅顯得臃腫，而且修改起來(lái)也不會(huì)方便。
這種情況下肯定用選擇器肯定會(huì)感覺(jué)爽一些。不過(guò)由于用選擇器的時(shí)候要用到各種雙引號(hào)單引號(hào)，所以在使用的時(shí)候應(yīng)該注意防止雙引號(hào)和單引號(hào)的提早匹配，我避免的方法是用 \" 去提醒瀏覽器不要過(guò)早的匹配，例子如下：
document.write("<div id=\"ok\">"+percentage+"</div>");
這里定義了一個(gè)名叫ok的ID選擇器去控制樣式，因id名需要用雙引號(hào)括起來(lái)，所以為了避免和前面的雙引號(hào)匹配，就用 \" 給它聲明一下，然后在CSS文件里面
#ok{style;}
就可以去定義自己想要的樣式和位置了。
您可能感興趣的文章:
- js中document.write使用過(guò)程中的一點(diǎn)疑問(wèn)解答
- js document.write()使用介紹
- document.write與writeln的輸出內(nèi)容區(qū)別說(shuō)明
- 在網(wǎng)頁(yè)中使用document.write時(shí)遭遇的奇怪問(wèn)題
- 第一個(gè)JavaScript入門(mén)基礎(chǔ) document.write輸出
- document.open() 與 document.write()的區(qū)別
- 代碼生成器 document.write()
- document.open() 與 document.write()
- JS 中document.write()的用法和清空的原因淺析
相關(guān)文章
一分鐘學(xué)會(huì)JavaScript中的try-catch
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一分鐘學(xué)會(huì)JavaScript中try-catch的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了繼承行為在 ES5 與 ES6 中的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
基于JS實(shí)現(xiàn)數(shù)字+字母+中文的混合排序方法
這篇文章主要介紹了基于JS實(shí)現(xiàn)數(shù)字+字母+中文的混合排序方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序class封裝http,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
上傳前預(yù)覽使用js實(shí)現(xiàn)還是比較cool的，同時(shí)還可以兼容IE和FF的能做到這一點(diǎn)已經(jīng)相當(dāng)不容易了，下面與大家一起分享下具體的實(shí)現(xiàn)，感興趣的你可不要錯(cuò)過(guò)了哈2013-05-05
js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read p
本文主要介紹了js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12
根據(jù)分辨率不同，調(diào)用不同的css文件...2006-08-08
這篇文章主要介紹了JavaScript類(lèi)型判斷的四種方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-10-10![Javascript的console['''']常用輸入方法匯總](http://img.jbzj.com/images/xgimg/bcimg9.png)
Javascript的console['''']常用輸入方法匯總
本文給大家?guī)?lái)了十幾種Javascript的console['']常用輸入方法，每種方法給大家介紹的都很詳細(xì)，需要的朋友參考下吧2018-04-04