用js模仿word格式刷功能实现代码 [推荐]
2009-07-23 00:00
756 查看
Format Brush
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;
}
B
I
U
S
R
Brush 再次点击Brush以结束使用格式刷
column1column2column3column4
column1column2column3column4
column1column2column3column4
column1column2column3column4
column1column2column3column4
column1column2column3column4
column1column2column3column4
用法:上下左右键移动单元格, 点格式化按扭格式化当前单元格,
点Brush准备使用格式刷,然后点任意单元格就会把当前单元格格式拷贝到被点击的单元格。
转载请注明来自:http://blog.csdn.net/sunxing007
//辅助函数
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
相关文章推荐
- 用js模仿word格式刷功能实现代码 [推荐]
- 用js模仿word格式刷功能
- JS模仿手机端九宫格登录功能实现代码
- JS模仿手机端九宫格登录功能实现代码
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载续][重点推荐控件]
- 一段js代码模仿实现sina广告条--转自griefforyou的程序人生
- 餐厅系统的餐次计数功能(纯js代码实现)
- JS实现一键回顶功能示例代码
- JS实现一键回顶功能示例代码
- 纯JS代码实现一键分享功能
- 博客园_插入代码(推荐)_按钮功能实现_代码高亮显示
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
- js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能
- ASP.NET实现word文档在线预览功能代码
- 基于JS实现密码框(password)中显示文字提示功能代码
- JS实现仿新浪微博发布内容为空时提示功能代码
- 下拉菜单点击实现连接跳转功能的js代码
- js实现网页倒计时、网站已运行时间功能的代码3例
- JS实现图片预加载之无序预加载功能代码