css规则不刷新样式标记规则

Question

我正在使用document更改cssRules.stylesheets更改发生但不知何故样式标记似乎没有更新，我需要更新iframe的样式标记中的textnode

这里是小提琴的链接 https://jsfiddle.net/1ahnxkhy/5/

var listCSS=".link1{text-transform:uppercase; color:red; background:#333; font-family:arial; font-size:14px; display:block}.link1:hover{background:red;}@media all and (max-width:640px) {.link1:hover{background:green;}}";
var iframeDoc=document.getElementById('myframe').contentWindow.document;
var style = iframeDoc.createElement('style');
var content = iframeDoc.createTextNode(listCSS);
style.appendChild(content);
var headTag = iframeDoc.getElementsByTagName('head')[0];         
headTag.insertBefore(style, headTag.childNodes[2]);

var div= iframeDoc.createElement('div');
div.innerHTML='<a href="#" class="link1">link</a>';
iframeDoc.getElementsByTagName("body")[0].appendChild(div);

var object={
            property:"backgroundColor",
            searchRule:".link1",
            value:"blue",
            media:0,
        };

for(var i=0; i<iframeDoc.styleSheets[0].cssRules.length; i++)
  { 
       if(iframeDoc.styleSheets[0].cssRules[i].selectorText==object.searchRule)
       {
         iframeDoc.styleSheets[0].cssRules[i].style[object.property]=object.value;
         console.log(iframeDoc.styleSheets[0].cssRules[i].cssText);
       }
  }