在<iframe>中的页面中如何实现对主页面中对象的选择

我想用js或jq实现对<iframe>中的页面中的某个button添加onclick来实现，对包含<iframe>的页面的其它元素的css属性改变，却不知道怎么写这个js选择器，因为通过window.parent.document.getElementById好像获取不到主页面中的元素，求高人指点，各种求。
主页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<h1 id="title">标题</h1>
<iframe src="1.html"></iframe>
</body>
</html>1.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body style="background-color:red; width:800px; height:300px">
<h1>1.html</h1>
<input type='button' value='提交' onclick="window.parent.document.getElementById(title).style.color='#FFFF00'"/>
</body>
</html>