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

代码如下:

 <!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. Linux性能监控工具 gtop

    给大家介绍一款性能监控工具,个人对比界面比top美观,常用指标比较清晰毕竟top上的指标不是每个人都能熟悉,也不是所有指标参数都需要看,对于新手也不便查找,好了说的再多先上图大家参观一下. 1.安装需 ...

  2. VMware下CentOS7安装后,还原虚拟网络后,敲ifconfig不显示局域网ip解决方法

    VMware下CentOS7安装后,还原虚拟网络后,敲ifconfig不显示局域网ip,没有出现eth0网卡,不能上网,SSH不能连接,输入ifconfig后如下图: 解决方法: 1.编辑网卡的配置文 ...

  3. thinkphp5 分页带参数的解决办法

    文档有说可以在paginate带参数,然后研究了下,大概就是这样的: $list=Db::name('member') ->where('member_name|member_mobile|se ...

  4. Plugin was not installed: Cannot download 'https://plugins.jetbrains.com/pluginManager''

    在Android studio中安装插件的时候,提示了类似这种的错误,解决这个问题有以下几步 1.打开Configure->Settings 2.System Settings->Upda ...

  5. ECSHOP和SHOPEX快递单号查询国际EMS插件V8.6专版

    发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...

  6. 移植Linux Kernel SM750 驱动到VxWorks 7

    一.SM750简介 SM750 是SiliconMotion 推出的一款适合嵌入式设备的显卡(Embedded GPU),采用PCIe接口与CPU连接,内部集成16MB DDR SDRAM显存,产品具 ...

  7. AB PLC 编程之状态机

    AB的程序设计和西门子有点PLC不大一样,在AB中没有RS指令,所以主要用move指令来作步进.今天我们就用Move指令写个AB的程序,和西门子比,有哪些不同. 控制任务 很简单的一个状态机.初始步为 ...

  8. Python学习:1.快速搭建python环境

    一.安装python 现在python有两个比较大的版本一个是python3.x一个是python2.x,python3.x相当于与python2.x是一个比较大的升级,但是python3.x没有向下 ...

  9. poj3308 Paratroopers

    Description It is year 2500 A.D. and there is a terrible war between the forces of the Earth and the ...

  10. SIMD数据并行(一)——向量体系结构

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...