JavaScript--innerHTML与className

最新推荐文章于 2022-04-17 21:14:15 发布

海向

最新推荐文章于 2022-04-17 21:14:15 发布

阅读量1.1k

点赞数 1

分类专栏： JavaEE是怎样炼成的

本文链接：https://blog.csdn.net/baidu_37181928/article/details/78703028

版权

JavaEE是怎样炼成的专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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.

海向

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--innerHTML与className

innerHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ display: block; height: 60px;
复制链接

扫一扫