首先，回忆一下，访问对象属性一共有两种方法：点获取法和方括号获取法。而我们最常用的就是点获取法了。但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不太好用了，尤其是我们不知道属性名的时候更不好办。这时候，方括号获取法就派上用场了。下面，来看一个例子，就一目了然了。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <p>请输入城市名字</p>

     <input type="text" id="input-city"/>

     <br/>

     <p>请输入空气污染指数</p>

     <input type="text" id="input-num"/>

     <button id="btn">按钮</button>

 </body>

 <script>

     window.onload = function(){

         var btn = document.getElementById('btn');

         var input_city = document.getElementById('input-city');

         var input_num = document.getElementById('input-num');

 // 先声明一个空对象

         var obj = {};//用来存放获取到所填写的信息

 //点击按钮的时候将信息保存到对象中

         btn.onclick = function(){

             var city = input_city.value;

             var num = input_num.value;

             obj[city] = num;//利用方括号法添加属性和属性值

             console.log(obj);//会输出obj={xxx：yyyy，zzz：kkk}

         }

     }

 </script>

 </html>

关于如何利用原生js动态给一个空对象添加属性以及属性值的更多相关文章

  1. js动态的给json对象添加新的元素

    把{name:"xxx",age:"xxx"}变成{name:"xxx",age:"xxx",value:"x ...

  2. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  3. 利用原生JS实现类似浏览器查找高亮功能(转载）

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  4. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  5. php 中如何创建一个空对象

    // 创建一个空对象 $obj=(object)array(); //假设这是从数据库取内容 $arr=["prod_id"=>103,"prod_name&quo ...

  6. PHP中怎样创建一个空对象?

    如果没有声明一个对象然后就对其属性赋值会出现警告.那么我们给它创建一个空对象然后赋值就好了.PHP中创建一个空对象代码如下: 第一种方式: $empty_object = new stdClass() ...

  7. jQuery.isEmptyObject()函数用于判断指定参数是否是一个空对象。

    jquery中有一个函数isEmptyObject()用来判断制定参数是否是一个空对象. 示例如下: function isEmptyObject(e) { var t; for (t in e) r ...

  8. js判断一个对象{}是否为空对象，没有任何属性

    // js如何判断一个对象{}是否为空对象,没有任何属性 if (typeof model.rows === "object" && !(model.rows in ...

  9. js进阶-9-3/4 form对象有哪些常用属性

    js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...

随机推荐

  1. <逆向学习第二天>如何手动脱UPX、Aspack壳

    UPS.AsPack压缩壳介绍: UPX .AsPack是一款先进的可执行程序文件压缩器.压缩过的可执行文件体积缩小50%-70% ,这样减少了磁盘占用空间.网络上传下载的时间和其它分布以及存储费用. ...

  2. Struts2进阶学习3

    Struts2进阶学习3 OGNL表达式与Struts2的整合 核心配置文件与页面 <?xml version="1.0" encoding="UTF-8" ...

  3. 如何解决tomcat中的应用报java.io.IOException: 您的主机中的软件中止了一个已建立的连接

    转载: 施勇: https://blog.csdn.net/shiyong1949/article/details/72845634 这两天突然看到日志文件中有“java.io.IOException ...

  4. web前端总结面试问题<经常遇到的手写代码>

    冒泡排序 var arr = [5,8,3,6,9] for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if( ...

  5. php中 include 、include_once、require、require_once4个语言结构的含义和区别

    对于不同页面中的相同代码部分,可以将其分离为单个文件 ,通过include引入文件. 可以提高代码的复用率 include 和include_once都有引入文件的作用 使用的语法是 :include ...

  6. Python练习笔记（2）

    文件读写,多线程.多进程 import time,os,threading,random def file_read(path): try: with open(path, 'r') as f: # ...

  7. hadoop生态搭建（3节点）-03.zookeeper配置

    # https://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html # ===== ...

  8. java服务端项目开发规范

    更新内容 2015-03-13 (请先更新svn的mybatis.xml.BaseMapper.java.Pager.java文件) 加入测试类规范 加入事物控制规范 加入mapper接口规则 ...

  9. Linux基础（04）、功能配置（调整防火墙、静态IP、环境变量）

    目录 一.centos防火墙 二.VMware网络连接方式 2.1.连接方式:桥接.NAT.仅主机 2.2.常见问题 三.centos配置静态IP 四.环境变量 4.1.什么是环境变量 4.2.临时修 ...

  10. POJ1659 可图性判定

    Frogs' Neighborhood Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 10660   Accepted: 4 ...