详解js获取DOM对象方法_简单网页文本编辑样式统一问题

接上篇，js控制文本样式方法也就那么几种，调来调去，把最后的成功效果规整一下，先看效果图：

很明显，文本存放在两个区域，显示区和编辑区

显示区控制样式比较简单，因为就是一个textarea，这个时候，通过document.getElementById('msgbox')方法即可

编辑区就比较麻烦了，因为每条聊天记录是一个页面元素，开始使用的是<span>标签，发现没有name属性，无法使用document.getElementsByName方法；

查了查，有个class属性，索性就调用一下，document.getElementsByClassName方法，这回对象获取到了，可是万恶的IE不识别，chrome和firefox倒是可以。网上有兼容IE的方法，代码量太多。

最终，选择应用<div>标签，使用name属性，就可以统一上下区域的样式问题了。相关源码如下：

// dml@wip 2012.8.17 put msg
function putMsgHTML(msg) {
	var msgHTML = '';

	var body = '';
	// dml@2012.8.17 arrange the place for the key data
	msgHTML += "<div title=\"@ " + mtime + "\" cDate=\"" + now.getTime()
			+ "\" dir=\"" + dir + "\" body=\"" + htmlEnc(body) + "\">";
	body = msgFormat(body);
	if (err) {
		msgHTML += "<span style='color:red;'> ";
	} else if (body.match(/^\/me /)) {
		body = body.replace(/^\/me /,
				"<span style=\"color:green;font-weight:bold;\" class=msgnick>* "
						+ nick + "</span> ");
	} else {
		msgHTML += "<span style=\"color:" + nickcolor + ";\" class=msgnick>"
				+ nick + "</span> ";
	}
	msgHTML += "  <span class=time>[" + mtime + "] </span>";

	// dynamic change name:chatArea color&font dml@2012.8.14
	msgHTML += "   <div name=\"chatArea\">" + body + "</span>";
	if (err)
		msgHTML += '</span>';
	msgHTML += "</div>";

	var auto_scroll = false;
	if (cFrame.body.scrollTop + cFrame.body.clientHeight >= cFrame.body.scrollHeight) // scrollbar
		// at
		// bottom
		auto_scroll = true;

	cFrame.body.innerHTML += msgHTML;
	// alert(msgHTML);

	this.changeMsgBoxStyle();

	if (auto_scroll)
		chat.scrollTo(0, cFrame.body.scrollHeight);
}


// let the textarea['msgbox']'s style be same as chatArea dml@ 2012.8.22
function changeMsgBoxStyle() {
	this.myfont();
	this.myfontColor();
	this.myfontSize();

	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.fontStyle = document.getElementById('msgbox').style.fontStyle;
	}

	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.fontWeight = document.getElementById('msgbox').style.fontWeight;
	}

	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.textDecoration = document.getElementById('msgbox').style.textDecoration;
	}

}

function myfont() {
	document.getElementById('msgbox').style.fontFamily = chatform.font.value;
	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.fontFamily = chatform.font.value;
	}
}

function myfontColor() {
	document.getElementById('msgbox').style.color = chatform.fontColor.value;
	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.color = chatform.fontColor.value;
	}
}
function myfontSize() {
	document.getElementById('msgbox').style.fontSize = chatform.fontSize.value;
	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		chatArea[i].style.fontSize = chatform.fontSize.value;
	}
}
// 斜体
function italic() {
	if (document.getElementById('msgbox').style.fontStyle == "italic")
		document.getElementById('msgbox').style.fontStyle = "Normal";
	else
		document.getElementById('msgbox').style.fontStyle = "Italic";

	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		if (chatArea[i].style.fontStyle == "italic")
			chatArea[i].style.fontStyle = "Normal";
		else
			chatArea[i].style.fontStyle = "Italic";
	}

}
function bold() {
	if (document.getElementById('msgbox').style.fontWeight == "bold")
		document.getElementById('msgbox').style.fontWeight = "Normal";
	else
		document.getElementById('msgbox').style.fontWeight = "Bold";

	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		if (chatArea[i].style.fontWeight == "bold")
			chatArea[i].style.fontWeight = "Normal";
		else
			chatArea[i].style.fontWeight = "bold";
	}

}
function underline() {
	if (document.getElementById('msgbox').style.textDecoration == "underline")
		document.getElementById('msgbox').style.textDecoration = "None";
	else
		document.getElementById('msgbox').style.textDecoration = "underline";

	var chatArea = frames["chat"].document.getElementsByName('chatArea');
	for ( var i = 0; i < chatArea.length; i++) {
		if (chatArea[i].style.textDecoration == "underline")
			chatArea[i].style.textDecoration = "None";
		else
			chatArea[i].style.textDecoration = "underline";
	}
}

感觉处理文本样式的时候，<div>标签和<span>标签差不多，区别就是一个等式<div>==<br><span>。

代码效率有待提升，还需要重构。