用js模仿word格式刷功能
2009-07-23 18:07
316 查看
运行代码
(PS:如果你要拷贝代码下去测试,不要直接拷贝下面的代码,下面的代码在显示的时候被csdn蹂躏了。 点击运行代码,然后查看原代码)
转载请注明来自:http://blog.csdn.net/sunxing007
(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.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>
转载请注明来自:http://blog.csdn.net/sunxing007
相关文章推荐
- 用js模仿word格式刷功能实现代码 [推荐]
- 用js模仿word格式刷功能实现代码 [推荐]
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
- js模仿java的Map集合,实现功能
- JS模仿手机端九宫格登录功能实现代码
- 原生js实现拖动图片左右弹性切换(模仿iPhone弹性拖拽的功能)
- JS+CSS实现模仿浏览器网页字符查找功能的方法
- JS封装的模仿qq右下角消息弹窗功能示例
- 模仿微信摇一摇功能 利用js来实现微信摇一摇来自动更换网页背景的功能
- js的prototype扩展的一个例子,模仿C#的StringBuilder功能,数组组合字符串,效率大于+拼凑
- JS+调用word打印功能实现在Webfrom客户端
- js模仿java的Map集合,实现功能
- JS代码模仿键盘功能,只有不到10K太强大了
- JS模仿手机端九宫格登录功能实现代码
- js 侦听手机摇动事件,模仿微信摇一摇功能
- js模仿微信摇一摇功能
- webApp 用js 模仿微信的摇一摇功能DeviceMotionEvent
- JS+CSS实现模仿浏览器网页字符查找功能的方法
- iOS Webview使用js获取图url,实现图片浏览的功能
- FoonSunCMS-Word图片上传功能-Xproer.WordPaster