js小案例（控制div属性）

Lihonhyu

于 2021-11-29 18:03:51 发布

阅读量484

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55880502/article/details/121616011

版权


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #box1 {width:500px; margin: 0 auto;padding: 0;text-align: center;}
    #box2 {
        background-color: black; width: 100px; height: 100px;
        margin: 10px auto;
    }
    </style>

    
</head>
<body>
<form id="box1">
    <input type="button" value="变宽" onclick="c_width()" />
    <input type="button"  value="变高" onclick="c_height()" />
    <input type="button" value="变色" onclick="c_color()" />
    <input type="button" value="隐藏" onclick="c_hide()" />
    <input type="button" value="重置" onclick="c_reset()"/>
    <div id="box2"></div>
</form>
<script type="text/javascript">
    var c_b = document.getElementById("box2");
    function c_width() {
        c_b.style.width="200px";
    }
    function c_height() {
        c_b.style.height="200px";
    }
    function c_color() {
        c_b.style.backgroundColor="red";
    }
    function c_hide() {
        c_b.style.visibility="hidden";
    }
    function c_reset() {
        c_b.style.cssText ="background-color: black; width: 100px; height: 100px;";
    }
</script>
</body>
</html>

Lihonhyu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小案例（控制div属性）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1 {width:500px; margin: 0 auto;padding: 0;text-align: center;} #box2 { background-color..
复制链接

扫一扫