{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myimage{
margin-left: 178px;
margin-top: -138px;
}
</style>
</head>
<body>
<div class="changeconent" id="changeconent">啦啦</div>
<div class="table"><table border="1">
<th>111</th>
<th>222</th>
<th>333</th>
<th>444</th>
<tr>
<td>www</td>
<td>sss</td>
<td>ddd</td>
<td>fff</td>
</tr>
<tr>
<td>www</td>
<td>sss</td>
<td>ddd</td>
<td>fff</td>
</tr>
</table></div>
<div class="btn"><button type="button" id="button" onclick="myFunction()">点我修改</button></div>
<img src="{% static 'img/pic_bulboff.jpg' %}" alt="" id="myimage" onclick="ChangeImage()" width="100" height="180">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
{# JavaScript：直接写入 HTML 输出流（注意：只能是在HTML输出中使用，如果在为当家在后使用该方法，会覆盖整个文档）#}
document.write('<h1>这是一个标题</h1>');
document.write('<p>这是一个段落。</p>');
{# JavaScript：改变 HTML 内容#}
function myFunction() {
x = document.getElementById('changeconent');
x.innerHTML="Hello JavaScript"; //改变内容
x.style.color = '#ff0000'; //改变样式
}
{# JavaScript：改变 HTML 图像#}
function ChangeImage() {
ele = document.getElementById('myimage');
if (ele.src.match("bulbon")){
{# ele.setAttribute('src',"{% static 'img/pic_bulboff.jpg' %}")#}
ele.src = "{% static 'img/pic_bulboff.jpg' %}"
}
else{
ele.src = "{% static 'img/pic_bulbon.jpg' %}"
}
}
</script>
</body>
</html>