js实现指定区域可编辑高亮效果代码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js实现指定区域可编辑高亮效果代码下载

本章节介绍一下如何实现页面中的指定区域高亮效果，此种效果在很多应用中都有类似的使用，下面就通过一个实力代码详细介绍一下它的实现过程，本代码非常的简单，希望能够给大家开阔一下思路或者带来一定的启发。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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>51前端</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>

代码描述：js指定区域编辑高亮效果。js实现指定区域可编辑高亮效果代码下载

下载全部收藏

177 235

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册