Javascript 更改iframe中元素的CSS属性

这是我的典型领域的样子

<input class='live-field' type=color data-el='#header' data-prop='background'>

显然，这不起作用，因为z

$（$t.data（'el'））

将查找文档中不在iFrame中的元素

这是我的扑克牌。

例如。。。如果我更改此输入的值

<input class='live-field' type=color data-el='#header' data-prop='background'>

---

对于

#f00

，iframe中元素

#header

的背景色应更改为

#f00

（红色）。

您应该能够使用jQuery的

.contents（）

方法访问iframe DOM，只要iframe与交互内容共享同一域。将onChange事件更改为使用以下代码应该可以做到这一点：

$('.live-field').change(function(){
  var $t = $(this);
  $('#iframe').contents().find( $t.data('el') ).css( $t.data('prop'), $t.val() )
});

---

编辑澄清：iFrame和您的输入必须共享同一个域，否则浏览器将不允许此类型的功能。请参见

您应该能够使用jQuery的

.contents（）

方法访问iFrame DOM，只要iFrame与交互内容共享同一个域。将onChange事件更改为使用以下代码应该可以做到这一点：

$('.live-field').change(function(){
  var $t = $(this);
  $('#iframe').contents().find( $t.data('el') ).css( $t.data('prop'), $t.val() )
});

编辑澄清：iFrame和您的输入必须共享同一个域，否则浏览器将不允许此类型的功能。看