JavaScript HTML DOM - 改变 CSS

最新推荐文章于 2024-09-22 11:17:00 发布

依然那么楞

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量744

点赞数

本文链接：https://blog.csdn.net/ling811/article/details/17242211

版权

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

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

例子 1

下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p id="p1">Hello</p>
<p id="p2">Hello</p>

<script>
	document.getElementById("p2").style.color = "red";
	document.getElementById("p2").style.fontFamily="Comic Sans MS";
	document.getElementById("p2").style.fontSize = "larger";
</script>
</body>
</html>

效果图：

例子 2

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<h1 id="id1">标题</h1>
<button type="button" οnclick="document.getElementById('id1').style.fontFamily='楷体'">点击</button>
</body>
</html>

点击前：

点击后：

例子 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" οnclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" οnclick="document.getElementById('p1').style.visibility='visible'" />
</body>
</html>

效果图：

隐藏前：