没有改变在iframe内加载的输入按钮的背景颜色

Not changing the background color of input button loaded inside the iframe

本文关键字：输入 按钮 背景 颜色 加载 改变 iframe      更新时间：2023-09-26

我在我的项目中使用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>

我必须根据用户的选择改变按钮的背景颜色。为此，我使用"jquery.minicolors.js"并将我的脚本写为…

<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作为

对象[]

因此，您的表单加载了iframe，您必须使用jQuery('#PLACE_IFRAME_ID').contents()选择器来获取iframe内容。

和更改提交按钮的背景颜色请使用下面的代码。

jQuery('#PLACE_IFRAME_ID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');

注意:在#PLACE_IFRAME_ID的位置放置您的iframe's id在选择器。

请完成工作演示:

// 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');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ifrmae id="IframeID">
  <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>  
  </iframe>
<select id="hue-demo-btn-bg">
  <option value="">select</option>
  <option value="red">red</option>
  <option value="orange">Orange</option>
  <option value="blue">Blue</option>
</select>

相关文章：