{% 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>

 

posted on 2018-10-09 12:04  海燕。  阅读(241)  评论(0编辑  收藏  举报