gpt4 book ai didi

javascript - 不更改 iframe 中加载的输入按钮的背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 02:08:23 24 4
gpt4 key购买 nike

我在我的元素中使用了material-design。我在 iframe 中加载我的 html 文件。我的 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>

它不改变按钮的背景颜色,也将空的对象打印为

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 的 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>

关于javascript - 不更改 iframe 中加载的输入按钮的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40232659/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com