JavaScript对象当作关联数组

JavaScript的对象不仅仅可以使用“.propertyName” 来访问对象的属性，也可以使用“[propertyName]”来访问对象的属性。

实例JavaScript代码

使用关联数组的方法访问对象的属性比使用传统的点“.propertyName”要灵活得多。因为我们可以在[]里填入一个变量，而不是必须事先制定好要访问的属性名。例如下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了。

<script type="text/javascript">
var d = document.getElementById("content");
function setProperty(){
	var sel = document.getElementById("selectColor");
	var propertyValue = sel.options[sel.selectedIndex].value;
	var propertyName = document.getElementById("selectColor").name;
	d.style[propertyName] = propertyValue;
}
</script>

HTML代码

本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件，调用函数。

<select id="selectColor" name="backgroundColor">
    <option value="aqua">aqua</option>
    <option value="black">black</option>
    <option value="blue">blue</option>
    <option value="fuchsia">fuchsia</option>
    <option value="gray">gray</option>
    <option value="green">green</option>
    <option value="lime">lime</option>
    <option value="maroon">maroon</option>
    <option value="navy">navy</option>
    <option value="olive">olive</option>
    <option value="purple">purple</option>
    <option value="red">red</option>
    <option value="silver">silver</option>
    <option value="teal">teal</option>
    <option value="white">white</option>
    <option value="yellow">yellow</option>
</select>
	<button onclick="setProperty(); return false;">设置背景颜色</button>

效果

选择颜色后点击按钮“设置背景颜色”。

 

本节的代码是我从CSS背景实验1里直接复制过来修改的，按照传统的对象属性访问方式，每设置一个样式属性都需要一个单独的函数，但是这种方法使得一个函数可以在修改之后适用于多个CSS属性。本方法来自《PPK谈JavaScript》一书。而且该方法同样适用于对象的方法。例如：obj.method与obj['method']()是一样的。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误