JavaScript--innerHTML与className

来源：互联网发布：淘宝网美国大樱桃编辑：程序博客网时间：2024/06/04 08:52

innerHTML

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        span{            display: block;            height: 60px;            background: #21EE34;            font:35px/60px "simhei";            color: #fff;        }        img{            width: 150px;            height: 80px;        }    </style></head><body>    <input type = "button" value = "click here" id = "btn1">    <div id = "box">        <span>德玛西亚大保健</span>    </div></body></html><script type="text/javascript">/*        innerHTML就是元素里面所有的东西 文字 换行 标签 空格...        innerHTML可以进行读操作也能进行写操作            oDiv.innerHTML                 读取oDiv里面的内容            oDiv.innerHTML = 新的值;                替换原来的div内容*/    var oDiv = document.getElementById("box");    var oBtn1 = document.getElementById("btn1");    var a = 1;    oBtn1.onclick = function(){        if(a > 3)            a = 1;        //alert(oDiv.innerHTML);        //oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>"        oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>';    }</script>

效果展示

alert(oDiv.innerHTML);会保留div里面的空格 回车 标签等所有内容

这里写图片描述

2

oDiv.innerHTML = oDiv.innerHTML + "<span>德玛西亚大保健</span>"

这里写图片描述

3

if(a > 3)        a = 1;oDiv.innerHTML += '<img src="img/'+ (a++) +'.jpg" alt = ""/>';

这里写图片描述

4.

如果把button放在div里面的话，第二次点击就失效了，因为div被全部替换了，所以它的click方法不会被执行

className

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div{            width:100px;            height: 100px;            background: red;            border: 2px solid yellow;            float: left;            margin-left: 100px;            text-align: center;            font:30px/100px "simhei";            color: #fff;            transition: 0.4s;        }        .a{            border: 6px solid #26FF08;            background: #2E00EF;            color: #ccc;            border-radius: 50%;        }    </style></head><body>    <div id="box1"></div>    <div id="box2"></div>    <div id="box3"></div></body></html><script type="text/javascript">    var oDiv1 = document.getElementById("box1");    var oDiv2 = document.getElementById("box2");    var oDiv3 = document.getElementById("box3");    oDiv1.onclick = function(){        oDiv1.className = "a";    }    oDiv2.onclick = function(){        oDiv2.className = "a";    }    oDiv3.onclick = function(){        oDiv3.className = "a";    }</script>

实际上是通过className为div设置了一个class下图为点击以后的效果

这里写图片描述

2.

阅读全文

0 0