JS/JQUERY父页面中修改iframe内部样式

Question

JS/JQUERY父页面中修改iframe内部样式
info.html 页面中有一个iframe的长宽固定。
iframe页面中有一张图片。

info.html 
<iframe id="navFrame" name="navFrame" frameborder="0"></iframe> 宽度已固定为页面宽度
$('#navFrame').attr("src","iframe.html"); 点击tab动态加载

iframe.html
<img id="img1" src="img/201_1.png" alt="">

当info页面比较小的时候，iframe中的图片显示不全（不加横向滚动条）
想要在父页面中动态的修改iframe中的img的宽度

document.getElementById("navFrame").contentDocument.getElementById("img1").css({"width":"100px"});
document.getElementById("navFrame").contentDocument.getElementById("img1").style.width="100px";
$("#navFrame").contents().find("#img1").css({"width":"100px"});
以上都试过不起作用

document.getElementById("navFrame").contentDocument.body.css({"color":"red"});
这句话试过，body背景颜色闪了一下又恢复了白色。

请问怎样才能修改iframe内部的样式

最终采用在iframe页面添加CSS的方法

 img{max-width: 100% !important; }
这样小图不变，大图最大宽度跟着父元素的iframe的宽度来

Answer 1

参考如下：

// js
document.getElementById("navFrame").contentWindow.document.getElementById("img1").style.width="100px";
// jq
$($("#navFrame").contents()[1]).find("#img1").css({"width": "100px"});