<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击某个元素,更改该元素的样式</title>
<style type="text/css">
h1 {
color:rgb(27, 12, 240);
}
h2 {
color:rgb(247, 210, 2);
}
h3 {
color:rgb(0, 252, 252)
}
</style>
</head>
<body>
<div>
<h1 id="id1" onclick="myFunction1()">这是h1标题!</h1>
<h2 id="id2" onclick="myFunction2()">这是h2标题!</h2>
<h3 id="id3" onclick="myFunction3()">这是h3标题!</h3>
</div>
<script>
function myFunction1() {
document.getElementById('id1').style.color='red';
}
function myFunction2() {
document.getElementById('id2').style.color='black';
}
function myFunction3() {
document.getElementById('id3').style.color='pink';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js获取输入框中的vlaue值</title>
<style type="text/css">
.div1 {
position:absolute;
margin:100px 400px;
}
</style>
</head>
<body>
<div class="div1">
<h3>js获取输入框中的vlaue值</h3>
<form>
<label>
输入信息:
<input id="study" value="" type="text" />
</label>
<input type="button" id="btn" value="获取" onclick="myFunction()" />
</form>
</div>
<script>
function myFunction() {
var v=document.getElementById("study").value;
alert("获取的对象value:"+v);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style>
table {
border-collapse:collapse;
}
</style>
</head>
<body>
<script>
document.write('<table class="table" border="1"/>');
for(var x=1;x<=9;x++){
document.write('<tr>');
for(var y=1;y<=x;y++){
document.write('<td>'+x+'x'+y+'='+(x*y)+'</td>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>