不更改iframe内加载的输入按钮的背景颜色

时间:2016-10-25 06:18:23

标签: javascript jquery html css iframe

我在我的项目中使用material-design。我在html内加载了iframe文件。我的html文件是

<form action="#" method="post" name="sign up for beta form">
    <div class="header">
        <p id="sampleTitle" contenteditable="true">Sign Up For Beta</p>
    </div>
    <div class="description">
        <p contenteditable="true">Milkshake is almost ready. If you're interested in testing it out, then sign up below
        to get exclusive access.</p>
    </div>
    <div class="input">
        <input type="text" class="button" id="email" name="email" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" class="button" id="submit" value="SIGN UP">
    </div>
</form>

我必须根据用户选择更改按钮的背景颜色。因为我正在使用&#34; jquery.minicolors.js&#34;并将我的剧本写成......

<script type="text/javascript">
    // background button color
    $(document.body).on('change', '#hue-demo-btn-bg', function () {
        var val = $(this).val();
        console.log($(document).find('#submit'));
        $(document).find('#submit').attr('style', 'background-color: ' + val + ' !important');
    });
</script>

它不会更改按钮的background color,也会将空object打印为

  

对象[]

1 个答案:

答案 0 :(得分:2)

因此,您的表单加载了trial Index training points avg. rmse -------------------------------------------------------- 1 50 43.5936 2 100 40.3413 3 150 34.8842 4 200 28.1230 5 250 28.3111 6 300 30.9915 7 350 30.8903 8 400 28.3148 9 450 28.9578 ,您必须使用iframe选择器来获取iframe内容。

要更改提交按钮的背景颜色,请使用以下代码。

jQuery('#PLACE_IFRAME_ID').contents()

注意:代替jQuery('#PLACE_IFRAME_ID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important'); #PLACE_IFRAME_ID ID放在选择器中。

请完成工作演示:

&#13;
&#13;
iframe's
&#13;
// background button color
$(document.body).on('change', '#hue-demo-btn-bg', function () {
  var val = $(this).val();  
  jQuery('#IframeID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');
});
&#13;
&#13;
&#13;