整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          javascript修改元素本身的HTML代碼的方法

          天遇到個來咨詢利用原生的JS代碼來修改HTML代碼的的童鞋,耐心的給這個童鞋做了解答后,然后整理了一下測試代碼,寫成文章記錄一下,方便以后有同需求的站長們。

          目標需求

          HTML原始代碼

          <form action="" method="post" class="form">
           <input id="mm" type="text" >
           <input id="mochu" type="text" onclick="act(this.value)" />
           <input id="mc" type="text" >
          </form>
          

          目標要求:

          利用JS代碼將以上HTML代中的 id 為 mochu 的 input 中的 cnclick 屬性去掉

          <input id="mochu" type="text" onclick="act(this.value)" />
          

          換成

          <input id="mochu" type="text" />
          

          解決方案

          利用 JS中dom對象的 outerHTML 屬性,可以輕松的解決這個問題

          outerHTML:設置或獲取對象及其內容的 HTML 形式

          例:JS獲取元表本身的HTML代碼

          代碼:

          <!DOCTYPE html>

          <html>

          <head>

          </head>

          <body>

          <form action="" method="post" class="form">

          <input id="mm" type="text" value="飛鳥慕魚博客" >

          <input id="mochu" type="text" onclick="act(this.value)" value="http://www.feiniaomy.com" />

          <input id="mc" type="text" >

          </form>

          <script>

          var html = document.getElementById('mochu').outerHTML;

          console.log(html);

          </script>

          </body>

          </html>
          

          打印結果:

          例:js修改指定元素的本身的HTML代碼

          通上面的例子,可以知道 outerHTML 屬性可以獲取到元素本身的HTML代碼,既然可以獲取也能設置或修改元素本身的代碼

          代碼:

          <!DOCTYPE html>
          <html>
          <head>
          </head>
          <body>
          <form action="" method="post" class="form">
           <input id="mm" type="text" value="飛鳥慕魚博客" >
           <input id="mochu" type="text" onclick="act(this.value)"/>
           <input id="mc" type="text" >
          </form>
          <script>
           var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
          </script>
          </body>
          </html>
          

          運行結果如圖所示

          補充說明

          以下是與 outerHTML 功能相似的屬性,下一篇文章會詳細說明一下他們的作用與區別

          innerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。

          innerText:設置或獲取位于對象起始和結束標簽內的文本

          outerHTML:設置或獲取對象及其內容的 HTML 形式

          outerText:設置或獲取對象的文本

          TML常用代碼之:修改頁面的實用性HTML代碼

          貼圖:<img src="圖片地址">

          加入連接:<a href="所要連接的相關地址">寫上你想寫的字</a>

          在新窗口打開連接:<a href="相關地址" target="_blank">寫上要寫的字</a>

          移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>

          字體加粗:<b>寫上你想寫的字</b>

          字體斜體:<i>寫上你想寫的字</i>

          字體下劃線: <u>寫上你想寫的字</u>

          字體刪除線: <s>寫上你想寫的字</s>

          字體加大: <big>寫上你想寫的字</big>

          字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)

          更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

          消除連接的下劃線:<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

          貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>

          貼flash: <embed src="flash地址" width="寬度" height="高度">

          貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

          換行:<br>

          段落:<p>段落</p>

          原始文字樣式:<pre>正文</pre>

          換帖子背景:<body background="背景圖片地址">

          固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body bgproperties=fixed>

          定制帖子背景顏色:<body bgcolor="#value">(value值見10)

          帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>

          貼網頁:<iframe. src="相關地址" width="寬度" height="高度"></iframe>

          果你需要在網頁上創建標題,或者在網站上改變不同頁面上的文本大小,或段落中的某個特定單詞突出,可以通過使用html命令更改文本大小來做到這一點。但凡上過html培訓學習的人都會很輕輕松學會這個操作,有導師指導,學起來要容易的多。

          更改前,先備份

          無論什么時候你要更改網頁,無論你只是在html中更改文本大小,還是在添加照片或將背景圖像更改為新模式時,在更改前始終要記住一點:備份你現有的頁面。這將確保如果在更改期間發生錯誤,并且此錯誤導致網頁丟失,則可以恢復到起始位置,然后再試一次。

          若要復制網頁,請打開該文件并復制html。然后將頁面html的副本粘貼到一個程序中,比如程序員的記事本,這是一個免費的實用程序,供網頁設計者/程序員使用,用于CSS、html和其他程序。

          在更改的操作中,備份是經常要做的事,這一點非常重要,一般你在html培訓學習時,老師都會強調這一點的。

          如何在HTML中更改文本大小

          首先,找到要更改的一行或多行文本。使用

          這個標記

          在html中更改文本大小是一個簡單的編碼問題,你可以學會自己做,你也可以使用各種額外的html技巧。通過參加html培訓學習,對html會有更系統更全面的認識,零基礎也能輕松學到有用的知識。

          了解更多


          主站蜘蛛池模板: 国产成人片视频一区二区| 伊人久久一区二区三区无码 | 一区二区三区四区在线观看视频| 人妻夜夜爽天天爽爽一区| 亚洲av一综合av一区| 伊人无码精品久久一区二区| 久久无码精品一区二区三区| 国产精品亚洲综合一区在线观看| 久久精品国产一区二区三区肥胖| 日韩精品一区二区三区国语自制| 午夜影视日本亚洲欧洲精品一区 | 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 国产福利电影一区二区三区,日韩伦理电影在线福 | 视频一区视频二区日韩专区| 亚洲日韩国产欧美一区二区三区| 日韩视频一区二区三区| 中文字幕一区二区三区在线不卡| 影院无码人妻精品一区二区| 国产一区二区三区在线免费| 国产精品熟女视频一区二区 | 亚洲日韩精品一区二区三区| 国产在线观看一区二区三区精品| 精品福利一区二区三区| 国产精品区一区二区三| 日本高清天码一区在线播放| 日本一区中文字幕日本一二三区视频 | 一区二区视频传媒有限公司| 久久影院亚洲一区| 91一区二区三区| 日本一区二区免费看| 日韩精品无码一区二区三区 | 日韩视频一区二区三区| 蜜桃无码一区二区三区| 亚洲AV无码片一区二区三区| 成人毛片无码一区二区| 精品一区二区高清在线观看| 红杏亚洲影院一区二区三区| 无码国产精品一区二区免费式芒果| 人妻无码一区二区三区AV| 中文无码一区二区不卡αv | 久久久久人妻一区精品性色av|