用js模仿word格式刷功能

(PS：如果你要拷贝代码下去测试，不要直接拷贝下面的代码，下面的代码在显示的时候被csdn蹂躏了。点击运行代码,然后查看原代码)

<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>    <a href="javascript:setItalic();" class="i">I</a>    <a href="javascript:setUnderline();" class="u">U</a>    <a href="javascript:setLineThrough();" class="s">S</a>    <a href="javascript:setRedColor();" class="r">R</a>    <a href="javascript:doBrush(this);" class="">Brush</a> <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> <br> 用法：上下左右键移动单元格，点格式化按扭格式化当前单元格， <br> 点Brush准备使用格式刷，然后点任意单元格就会把当前单元格格式拷贝到被点击的单元格。 <br> 转载请注明来自：<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a> </body> <script> //转载请注明来自：<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a> //辅助函数 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.οnkeydοwn=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>

转载请注明来自：http://blog.csdn.net/sunxing007

用js模仿word格式刷功能相关推荐

AVUE 富文本编辑器 avue-plugin-ueditor 格式刷功能 ver.0.2.7
avue-plugin-ueditor 版本:0.2.7 背景: 依据操作人员需求,认为目前在线编辑器没有ckeditor好用,也没有格式化的功能,目前项目是基于avue框架开发,使用了avue-pl ...
word刷子刷格式_利用word格式刷如何快速编辑不同格式的文字?
格式刷是一个功能非常强大的格式复制图标,它不仅可以复制文字格式,而且可以复制段落格式.今天小编为大家分享利用word格式刷如何快速编辑不同格式的文字?下面小编就为大家详细介绍一下,大家一起来看看吧! ...
Word格式刷使用技巧分享
格式刷是Word中非常强大的功能之一,有了格式刷功能,我们的工作将变得更加简单省时.在给文档中大量的内容重复添加相同的格式时,我们就可以利用格式刷来完成.下面就为大家详细的介绍"格式刷&qu ...
npoi excel 复制行_Excel的格式刷功能你真的会用吗？这样刷更加方便快捷
Excel表格相信小伙伴们都不陌生,不管是销售报表,还是财务报表,哪怕是简单的数据表格,在我们每天的工作当中,我们肯定都会接触到的. 而为了能够让Excel表格能够显示的更加直观,让观看表格的人浏览起 ...
用好Word格式刷让你事半功倍，高效率工作甩别人一条街！
格式刷在Word中是一个神奇的工具,用好它可以减少很多不必要的麻烦,今天小编给大家分享一下关于格式刷的用法. 格式刷的位置点击开始--剪切板--格式刷即可. 格式刷的用法格式刷作用是重复上一个操作 ...
JS - 实现word预览功能
前端实现word预览功能一. 文档地址要求二. 调用方法 1. html方式 2. script方式 XDOC文档预览云服务:http://view.xdocin.com/ 重要的事情说三遍: 注 ...
word格式刷如何连续刷多段不同字段？
格式刷单击是一次的,双击以后就是多次刷了,刷到最后,要结束前再单击一次格式刷就没有格式刷作用了,直到下一次你使用为止.
word格式刷双击没用时
我的有时也有类似问题,单击或双击不好用或者只能用一次刷子,尤其是跨页码时不能用. 我现在的解决办法是: 1 选定源格式区域,按ctrl +shift C,刷子蘸油漆的感觉.2. 选定即将被格式刷涂的区 ...
简单js模仿浏览器crtl+f功能
由于crtl+f在某些浏览器中并不是十分好用(比如查找一些特殊字符串),就用js简单的写了一个例子模仿crtl+f,实现输入内容点击查找,高亮标注匹配值,并跳到第一个高亮值处,点击下一个跳到第二个高亮 ...

用js模仿word格式刷功能

用js模仿word格式刷功能相关推荐

最新文章

热门文章