首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js通过input框输入属性和值,改变div的属性

js通过input框输入属性和值,改变div的属性

作者头像
王小婷
发布2019-03-04 10:46:56
15.6K0
发布2019-03-04 10:46:56
举报
文章被收录于专栏:编程微刊编程微刊

js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>函数传参,改变Div任意属性的值</title>

    <style>

        body,p{ /*内外边距重置为0*/

            margin:0;

            padding:0;

        }

        body{

            color:#333;/*字体颜色为黑色*/

            font:12px/1.5 Tahoma;/*字号行高*/

            padding-top:10px;/*上内边距*/

        }

        #outer{ /*div容器,左右置中*/

            width:300px;

            margin:0 auto;

        }

        p{

            margin-bottom:10px;/*下外边距*/

        }

        label{

            width:5em;/*60像素*/

            display:inline-block;/*行内块元素*/

            text-align:right;/*文本右对齐*/

        }

        input{

            padding:3px;

            font-family:inherit;

            border:1px solid #ccc;/*灰色*/

        }

        #div1{

            color:#fff;

            width:180px;

            height:180px;

            background:#000;/*黑色*/

            margin:0 auto;/*左右置中*/

            padding:10px;

        }

    </style>

    <script>

        // 此函数接收3个参数:元素对象,属性名,属性值,把值赋给属性

        var changeStyle = function (elem, name, value) {

            elem.style[name] = value;

        }

        window.onload = function () {

            var oDiv = document.getElementById("div1");//获取div元素引用

            var oBtn = document.getElementsByTagName("button"); //获取按钮的引用

            var oInput = document.getElementsByTagName("input"); //获取input元素的引用

            oBtn[0].onclick = function () { //给确定按钮添加事件

                changeStyle(oDiv, oInput[0].value, oInput[1].value);//调用changeStyle函数

            };

            oBtn[1].onclick = function () { //给重置按钮添加事件处理

                oDiv.removeAttribute("style");//去除样式

            }

        }

    </script>

</head>

<body>

    <!--div容器-->

    <div id="outer">

        <p><label>属性名:</label><input type="text" value="" /></p>

        <p><label>属性值:</label><input type="text" value="" /></p>

        <p><label></label><button>确定</button><button>重置</button></p>

    </div>

    <div id="div1">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div>

</body>

</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.02.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档