使用HTML DOM操作CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法：

document.getElementById(id).style.property=new style

例：改变p标签内的文本颜色

HTML代码：

<p id="p1">hello world!</p>

JavaScript代码：

document.getElementById('p1').style.color="pink";

结果为：

 例：点击按钮改变文字的颜色

HTML代码：

<h2 id="head">My Heading 1</h2>    //文本内容
<input  type="button" value="点击这里！" onclick="change()">    //触发按钮

JavaScript代码：

		function change(){
			document.getElementById('head').style.color="red";    //改变文字颜色为红色
		}

结果为：

点击前：

点击后：

例：给网页换背景色

HTML代码：

<button type="button" onclick="document.body.style.backgroundColor='pink'">点击切换皮肤为粉色</button>
<button type="button" onclick="document.body.style.backgroundColor='orange'">点击切换皮肤为橙色</button>

效果图：

例：切换背景色为灰色

通过className来获取样式

CSS代码：

		.skin-gray{
			background-color: gray;
		}

HTML代码：

	<button type="button" onclick="document.body.className='skin-gray'">点击切换为灰色</button>

效果：

好了，大概内容就到这里！！！

下一篇：HTML增加、删除和替换节点