用js模仿word格式刷功能实现代码 [推荐]

更新时间：2009年07月23日 23:08:41 作者：

非常不错的模仿word格式刷实现代码。推荐大家参考下思路。

<html> <head> <title>Format Brush</title> </head> <style> table{ border: solid #ccc 1px; } td{ border: solid #ccc 1px; width: 140px; height: 25px; } .selected{ border: solid red 1px; } a{ text-decoration: none; color: black; font-weight: bold; } .b{ } .i{ font-style: italic; } .u{ text-decoration: underline; } .s{ text-decoration: line-through; } .r{ color: red; } </style> <body> <div> <a href="javascript:setBold();" class='b'>B</a> &nbsp;&nbsp; <a href="javascript:setItalic();" class="i">I</a> &nbsp;&nbsp; <a href="javascript:setUnderline();" class="u">U</a> &nbsp;&nbsp; <a href="javascript:setLineThrough();" class="s">S</a> &nbsp;&nbsp; <a href="javascript:setRedColor();" class="r">R</a> &nbsp;&nbsp; <a href="javascript:doBrush(this);" class="">Brush</a>&nbsp;<span id="tip" style="display: none;">再次点击Brush以结束使用格式刷</span> </div> <table id='t' cellpadding='0' cellspacing='0' border='1'> <tr><td class="selected">column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> <tr><td>column1</td><td>column2</td><td>column3</td><td>column4</td></tr> </table>  用法：上下左右键移动单元格， 点格式化按扭格式化当前单元格，  点Brush准备使用格式刷，然后点任意单元格就会把当前单元格格式拷贝到被点击的单元格。  转载请注明来自：http://blog.csdn.net/sunxing007 </body> <script> //辅助函数 function $(id){return document.getElementById(id);} var tb = $('t'); var selectedCell = tb.rows[0].cells[0];//当前被选择的单元格。 var brushing = false;//是否正在使用刷子 function setBold(){ selectedCell.style.fontWeight = "bold"; } function setItalic(){ selectedCell.style.fontStyle = "italic"; } function setUnderline(){ selectedCell.style.textDecoration = "underline"; } function setLineThrough(){ selectedCell.style.textDecoration = "line-through"; } function setRedColor(){ selectedCell.style.color = "red"; } //格式拷贝 function copyFormat(source, dist){ dist.style.fontWeight = source.style.fontWeight; dist.style.fontStyle = source.style.fontStyle; dist.style.textDecoration = source.style.textDecoration; dist.style.color = source.style.color; } function doBrush(e){ if(!brushing){ $('tip').style.display = ''; } else{ $('tip').style.display = 'none'; } brushing = !brushing; } document.onkeydown=function(){ window.status = event.keyCode; switch(event.keyCode){ case 37: { moveLeft(); break; } case 38: { moveUp(); break; } case 39: { moveRight(); break; } case 40: { moveDown(); break; } } } function moveLeft(){ if(selectedCell&&selectedCell.previousSibling){ selectedCell.className=''; selectedCell = selectedCell.previousSibling; selectedCell.className = 'selected'; } } function moveRight(){ if(selectedCell&&selectedCell.nextSibling){ selectedCell.className=''; selectedCell = selectedCell.nextSibling; selectedCell.className = 'selected'; } } function moveUp(){ if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.previousSibling){ selectedCell.className=''; var _index = selectedCell.cellIndex; selectedCell = selectedCell.parentNode.previousSibling.cells[_index]; selectedCell.className = 'selected'; } } function moveDown(){ if(selectedCell&&selectedCell.parentNode&&selectedCell.parentNode.nextSibling){ selectedCell.className=''; var _index = selectedCell.cellIndex; selectedCell = selectedCell.parentNode.nextSibling.cells[_index]; selectedCell.className = 'selected'; } } document.body.onload = function(){ for(var i=0; i<tb.rows.length; i++){ for(var j=0; j<tb.rows[i].cells.length; j++){ tb.rows[i].cells[j].onclick = function(){ if(brushing){ copyFormat(selectedCell, this); } }; } } } </script> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jsp页面中显示word/excel格式的文档的方法

javascript之textarea打字机效果提示代码推荐
非常不错的提示输入内容，动态的提示，给人亲切感
2008-09-09
Bpmn.js activiti 流程编辑器详细教程
流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧
2023-10-10
聊聊JavaScript中.?、??、??=的用法以及含义
今天项目中突然遇到了不太明白的写法,下面这篇文章主要给大家介绍了关于JavaScript中.?、??、??=的用法以及含义的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
巧用局部变量提升javascript性能
巧用局部变量可以有效提升javascript性能，下面有个不错的示例，大家可以参考下
2014-02-02
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法
2014-01-01
预防网页挂马的方法总结
这篇文章主要介绍了预防网页挂马的方法总结的相关资料,这里详细整理了具体方法，和如何实现，需要的朋友可以参考下
2016-11-11
浅谈js中的三种继承方式及其优缺点
下面小编就为大家带来一篇浅谈js中的三种继承方式及其优缺点。小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-08-08
javascript实现模拟时钟的方法
这篇文章主要介绍了javascript实现模拟时钟的方法,涉及javascript操作时间实时显示的相关技巧,需要的朋友可以参考下
2015-05-05
js中onclick和addEventListener的区别
本文对javascript中onclick事件处理的方法和addEventListener监听器进行讲解,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
js通过Date对象实现倒计时动画效果
这篇文章主要为大家详细介绍了js通过Date对象实现倒计时动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10