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

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

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>
相关文章
|
2天前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
2天前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
2天前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
2天前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性
|
5天前
|
JavaScript 前端开发
JavaScript常用的属性
JavaScript常用的属性
|
24天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
21 0
|
24天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
2月前
|
前端开发 JavaScript 算法
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)
|
2月前
|
前端开发 JavaScript 索引
深入探究 JavaScript 中的 String:常用方法和属性全解析(中)
深入探究 JavaScript 中的 String:常用方法和属性全解析(中)
|
2月前
|
存储 前端开发 JavaScript
深入探究 JavaScript 中的 String:常用方法和属性全解析(上)
深入探究 JavaScript 中的 String:常用方法和属性全解析(上)

相关产品

  • 云迁移中心