H5基础知识第十一课时(className属性)

最新推荐文章于 2021-04-08 22:38:18 发布

yuzhaocong

最新推荐文章于 2021-04-08 22:38:18 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yuzhaocong/article/details/73771320

本文介绍了一个简单的网页示例，通过JavaScript实现点击按钮后更改指定div元素的样式，包括背景颜色和字体大小等，展示了如何操作DOM元素的类属性。

<style>
    .style1{
        width: 200px;
        height: 200px;
        border: solid 1px red;
    }
    .style2{
        background-color: #00b8e9;
        position: absolute;
        right: 10px;
    }

</style>

<body>
<div class="style1" id="div1">div1</div>


<button id="change">移位</button>


</body>
<script>
    var change = document.getElementById("change");
    change.addEventListener("click", function () {

        var div=document.getElementById("div1");
                div.className += " style2";
//        className可以设置或返回元素的 class 属性
//        div.style.width = "500px";//        div.style.backgroundColor = "red";        div.style.cssText="font-size=50px;color=red"/*一定要加上分号*/    });</script>