请检查此链接:http://jsfiddle.net/Raakh5/hg6au2y2/
<div id="aq-block-1076-2" class="aq-block aq-block-aq_text_block aq_span4 aq-first clearfix">
<div class="cp-calc-widget" data-calcid="2424" data-anchor="2">
<form class="widgetForm cleanslate" id="widgetForm" method="post"
style="width: 260px !important; background-color: #378CAF !important;
border-color: #006395 !important; color: #ffffff !important; font-size: 16px !important;">
<input name="numFields" type="hidden" value="1">
<input name="calcId" type="hidden" value="2424">
<input name="answer_format" type="hidden" value="function">
<div class="widgetTitle">Water Intake Calculator</div>
<hr style="color: #006395 !important; background-color: #006395 !important;">
<div class="form_area"><div class="field">Weight:<div class="buffer">
<input class="inputArea" name="input0" value="">
</div>
</div>
<input type="submit" id="widgetSubmit" class="widgetSubmit calc_button" value="Calculate"
style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395) !important;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #378CAF),color-stop(1, #006395)) !important;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#378CAF, endColorStr=#006395, GradientType=0 );
border-color: #006395 !important;">
</div>
<div class="answer_area hidden_class">
<div class="loading">loading...</div>
<div class="actual_answer hidden_class">
<span class="pre_answer"></span>
<div class="answer">
<span class="return_answer"></span></div>
</div>
<div>
<input type="button" id="backButton" class="backButton calc_button" value="< back"
style="color: #ffffff !important; background-image: -moz-linear-gradient(top, #378CAF, #006395) !important;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #378CAF),color-stop(1, #006395)) !important;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#378CAF, endColorStr=#006395, GradientType=0 );
border-color: #006395 !important;">
</div>
</div>
</div>
</form>
</div>
我已经嵌入了wordpress插件亲计算器,想要改变它:
请告知
答案 0 :(得分:2)
你有几个选择。
1)(推荐)使用另一个不直接在html元素上插入内联样式的插件。然后你可以使用CSS设置样式,而不必与内联样式作斗争。
2)覆盖其显示功能的输出。如果他们正在使用动作/钩子,您应该能够取消注册其在页面上显示html的功能,将其复制到您自己的功能中,并注册您的功能来代替他们的功能。这可能会很好,因为您可以更改输出,例如将(lbs)添加到重量输入。 Here is an example of doing the action overrides.
第三个也是最差的选项是直接编辑插件代码,但如果网站管理员在wp-admin中进行一键式插件更新,将丢失所有更改。这显然是一个不受欢迎的场景。
答案 1 :(得分:0)
好吧,我想我找到了一种方法,这可能是一种黑客攻击。由于id
都是相同的,并且您使用jQuery,因此可以使用.css()
轻松更改它。试一试,你应该把它放在CSS中:
(function ($) {
setTimeout(function () {
$(function () {
$("#widgetForm").css({
"border-width": "2px",
"background-color": "#ccc",
"border-color": "#99f"
});
});
}, 1250);
})(jQuery);
另外,让我们给出一个简单的setTimeout()
,以便花费时间加载插件。 :)