title: Access grandchild of a variable (parent.child.grandchild) without dots and one pair of brackets
body: <p>I'm building a canvas-related class with a kind of conversion table. The conversion table can be edited by the user. (Isn't really relevant, but maybe you want to know why):</p>
  
  <pre><code>cLayout = function(option) {
      //obtaining the canvas (el) here
      this.setup = function(option) {
          t=this.table;
          for (var p in t)
          {
              el[t[p][0]] = option[p]||t[p][1]
          }
      }
      this.setup(option)
  }
  
  cLayout.prototype.table = {
      width:[['style']['width'],"100%"],
      height:['style'['height'],"100%"],
      bg:[['style']['backgroundColor'],""],
      position:[['style']['position'],"absolute"],
      left:['style'['left'],"0px"],
      top:['style'['left'],"0px"]
  }
  </code></pre>
  
  <p>Example:</p>
  
  <pre><code>var b = new cLayout({left:'10%',width:'90%'})
  </code></pre>
  
  <hr>
  
  <p>Real question:</p>
  
  <p>Normally, I'd use <code>el['style']['width']</code> to set el.style.width.
  But I want to use <code>el[something]</code> without the second pair of brackets: I want the property name to be completely variable (I also want to be able to set <code>el['innerHTML']</code>). So, is there a way to get a grandchild by using <code>a[b]</code>, without using <code>a[b][c]</code>?</p>
  
  <p>P.S. Of course, I don't want to use eval.</p>