<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="title1">标题1</h1>
<button id="Btnchange">change</button>
</body>
<script type="text/javascript">
//点击按钮改变标题字体
window.onload=function(){
//通过特定id属性来获取按钮对象,如下
var Btnchange=document.getElementById("Btnchange");
//获取到按钮对象后 调用.onclick属性点击触发一个自定义函数 函数内容编写改变其css样
式
Btnchange.onclick=function(){
//改变标题 同上获取标题对象
var title1=document.getElementById("title1");
title1.style.fontSize="12px"; // font-size ----fontSize
title1.style.color="white";
title1.style.backgroundColor="blue";
title1.style.fontWeight="400";
title1.style.width="50px";
}
}
</script>
</html>
点击按钮后 改变样式: