html轉jsp之后樣式變了（js類型轉換的使用方法）

今天給大家講述的是我個人前段時間的一個真實經歷，如何將html代碼封裝（轉換）成JS實現調用？

將html代碼封裝成js干嘛呢？直接寫在html頁面不好嗎？首先我來為大家解答這個疑惑，也許有一天會有小伙伴和我遇到同樣的問題。

我管理的網站是用織夢搭建的后臺，但是我需要在全站（包含所有文章頁和列表頁、欄目頁）添加一張banner圖（此處知識舉個栗子），如果我直接寫在模板里面，必然要更新所有欄目及其子頁面模板，想一想一個網站有多少欄目，多少模板？是不是我每次更新banner圖都需要去每一個模板修改呢？這樣的話會大大降低我們的效率，所以將此處banner圖的html代碼封裝成JS就很有必要了，以后修改banner圖，僅需修改封裝了banner圖html代碼的JS文件即可！

是吧，看到這里是不是已經明白了為什么要將將html代碼封裝成js了，下面颯颯來具體講解一下將html代碼封裝（轉換）成JS的具體步驟：

步驟一：打開Dreamweaver或者類似軟件，事先寫好需要封裝的HTML代碼。

步驟二：打開站長工具里面的HTML/JS轉換頁面，將需要封裝的HTML代碼轉換成JS代碼，如下圖：

步驟三：在Dreamweaver中新建一個JS文件，將轉換后的JS代碼復制粘貼進去，保存為banner.js文件。

步驟四：在網站服務器中上載banner.js文件，記住上傳的路徑。

步驟五：進入網站后臺，在需要添加banner圖的模板中適當位置加入JS封裝代碼。代碼如下：

<script src=”banner.js” type=”text/javascript”></script>

完成以上步驟，刷新后臺欄目，即可實現banner圖的調用，是不是完美解決了banner圖的調用問題呢？以后修改banner圖的時候，只需要修改banner.js文件即可。