js實現的指定區域可編輯高亮效果

antzone發表於2017-03-21
JS

本章節介紹一下如何實現頁面中的指定區域高亮效果，此種效果在很多應用中都有類似的使用，下面就通過一個實力程式碼詳細介紹一下它的實現過程，本程式碼非常的簡單，希望能夠給大家開闊一下思路或者帶來一定的啟發。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<table border="1" align="center" width="700px">
  <tr>
    <td width="300px" height="200px">
      <div id="content"><input type="button" value="檢視效果" id="bt"/></div>
    </td>
    <td style="vertical-align:top">
      <div id="highlight" align="top">
        <h4><span>這是高亮顯示區域</span> </h4>
        <p>
          <label>使用者名稱:</label>
          <input type="text" />
        </p>
        <p>
          <label>密　碼:</label>
          <input type="password" />
        </p>
        <p>
          <input type="submit" value="註冊" />
          <input type="reset" value="重置" />
        </p>
      </div>
    </td>
    <td width="100px"><div>螞蟻部落</div></td>
  </tr>
</table>
<script type="text/javascript"> 
var highlight=document.getElementById("highlight"); 
var bt=document.getElementById("bt"); 
bt.onclick=function(){ 
  highlight.style.background="#e2ecf5"; 
  highlight.style.zIndex="501"; 
  highlight.style.position="absolute"; 
 
  mark=document.createElement("div"); 
  mark.setAttribute("id","mark"); 
  mark.style.background="#000"; 
  mark.style.width="100%"; 
  mark.style.height="100%"; 
  mark.style.position="absolute"; 
  mark.style.top="0"; 
  mark.style.left="0"; 
  mark.style.zIndex="500"; 
  mark.style.opacity="0.3"; 
  mark.style.filter="Alpha(opacity=30)"; 
  document.body.appendChild(mark); 
} 
</script>
</body>
</html>

以上程式碼實現了我們的要求，點選按鈕可以使文字框部分呈現高亮顯示效果，下面介紹一下它的實現過程。

一.實現原理:

原理非常的簡單，點選按鈕的時候，能夠將文字框部分設定為絕對定位，並且重新設定背景顏色以便呈現高亮效果，並設定z-index值，同時動態建立一個遮罩層，層，此遮罩層也是絕對定位，並且z-index的值要小於文字框部分，這樣，文字框部分就會層疊在遮罩層之上，於是也就實現了我們想要的效果。

二.相關閱讀:

1.設定元素的樣式可以參閱javascript如何修改元素的樣式一章節。

2.createElement()函式可以參閱js createElement()一章節。

3.setAttribute()函式可以參閱setAttribute()函式的用法詳解一章節。  

相關文章