点击按钮改变样式

最新推荐文章于 2022-04-25 14:23:46 发布

吴机智

最新推荐文章于 2022-04-25 14:23:46 发布

阅读量221

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108474476

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            margin: 50px auto;
            width: 600px;
            border: 1px solid black;
        }

        p {
            width: 200px;
            height: 100px;
            background: yellow;
            margin: 0 0 100px 10px;
        }

        ul li {
            line-height: 40px;
            border-top: 1px solid black;
        }

        input {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <ul>
        <p id="p">羡慕王桑</p>
        <li><input type="text" id="inp1"><button id="btn1">背景颜色</button></li>
        <li><input type="text" id="inp2"><button id="btn2">文字颜色</button></li>
        <li><input type="text" id="inp3"><button id="btn3">文字大小</button></li>
        <li><input type="text" id="inp4"><button id="btn4">修改宽度</button></li>
        <li><input type="text" id="inp5"><button id="btn5">修改高度</button></li>
    </ul>
    <script>
        // 实现效果: 点击对应的按钮, 根据对应的输入框的内容, 改变p标签的样式
        // 获取元素
        var p = document.getElementById('p');

        var inp1 = document.getElementById('inp1');
        var btn1 = document.getElementById('btn1');
        // console.log(p, inp1, btn1);
        // 点击
        btn1.onclick = function(){
            // 获取输入框的值
            console.log(inp1.value);
            // 设置给p标签
            p.style.background = inp1.value;
        }
    </script>
</body>

</html>

吴机智

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮改变样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
复制链接

扫一扫