javascript dom 编程艺术 CSS DOM

最新推荐文章于 2025-06-15 14:13:34 发布

原创最新推荐文章于 2025-06-15 14:13:34 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个简单的HTML页面示例展示了如何使用JavaScript来动态地改变元素的颜色和字体大小。页面中定义了一个段落，并通过外部CSS文件设置了初始样式。接着利用内嵌的JavaScript代码，在页面加载完成后获取该段落元素并修改其颜色为黑色，同时将字体大小调整为原来的两倍。

p#example{
color:red;
font:12px 'Arial',sans-serif;

}

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="screen"/>

<script type="text/javascript">
window.onload=function(){
var para=document.getElementById("example");
alert("The font size is "+para.style.fontSize);
para.style.color="black";
para.style.font="2em 'Times',serif"
}
</script>
<body>
<p id="example">An example of a paragraph</p>
</body>
</head>
</html>