用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格式的文档的方法

使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例
schema-utils 库用于在 loader 和 plugin 实例化时，对传入的参数进行校验，本文重点给大家介绍使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的用例详解，感兴趣的朋友一起看看吧
2022-03-03
小程序实现手写签名
这篇文章主要为大家详细介绍了小程序实现手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js禁止浏览器的回退事件
这篇文章主要为大家详细介绍了js禁止浏览器的回退事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
JavaScript实现动态表格的方法详解
这篇文章主要为大家介绍了JavaScript实现动态表格的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
微信小程序开发之实现自定义Toast弹框
Toast相信对于利用微信小程序开发的朋友们来说都不陌生，有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成WeToast，这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料，需要的朋友可以参考下。
2017-06-06
js实现浏览器打印功能的示例代码
这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
Javascript delete 引用类型对象
很少使用javascript的delete，最近因为一个小bug发现删除引用类型对象的时候有一点不同
2013-11-11
微信小程序实现简单的select下拉框
这篇文章主要为大家详细介绍了微信小程序实现简单的select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
解决html按钮切换绑定不同函数后点击时执行多次函数问题
这篇文章主要介绍了如何解决html按钮切换绑定不同函数后点击时执行多次函数问题,需要的朋友可以参考下
2014-05-05
JS随拖拽速度设置倾斜角度的实现代码
这篇文章主要给大家介绍了JS如何随拖拽速度设置倾斜角度,文中有详细的代码讲解,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手尝试一下
2023-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具