<分区>
<分区>
我实际上是在为 wordpress 开发一个插件，但我在动态设置按钮形式 (input[type="submit"]) 时遇到问题，因为一些 wordpress 主题使用“!重要的”属性。
我想覆盖在 HTML 输入对象下使用 JavaScript，因为我想使用 php 调用一些 css 值。
在下面的演示中，我自愿将“!important”属性放在 css 样式中以尝试覆盖它。
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: #333333!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: #27ccc0!important;
color: #FFFFFF!important;
}<input
onmouseover="this.style.backgroundColor='#6ce033'; this.style.color='#FFF'; return true;"
onmouseout="this.style.backgroundColor='#40c200'; this.style.color='#FFF'; return true;"
type="submit"><?php
function add_button($id) {
$stored_meta = get_post_meta($id);
$btn_bg_color = esc_attr( $stored_meta['btn_bg_color'][0]);
$btn_txt_color = esc_attr( $stored_meta['btn_txt_color'][0]);
$hover_btn_bg_color = esc_attr( $stored_meta['hover_btn_bg_color'][0]);
$hover_btn_txt_color = esc_attr( $stored_meta['hover_btn_txt_color'][0]);
echo '<input onmouseover="this.style.backgroundColor='."'".$btn_bg_color."'".'; this.style.color='."'".$btn_txt_color."'".'; return true;"
onmouseout="this.style.backgroundColor='."'".$hover_btn_bg_color."'".'; this.style.color='."'".$hover_btn_txt_color."'".'; return true;" type="submit">'
?>
}上面是我想做的具体例子。根据帖子 ID 更改样式。
最佳答案
由于您似乎没有找到上一个答案中的哪一个可以解决您的问题，这里有一个示例实现。
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: pink!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: red!important;
color: #FFFFFF!important;
}<input onmouseover="this.setAttribute('style','background: #6ce033 !important; color: #fff !important;');" onmouseout="this.setAttribute('style','background: #40c200 !important; color: #fff !important;');" type="submit">有一个错误，按钮最初是粉红色的，直到您将鼠标悬停在它上面时才会改变。您可以通过向输入添加唯一 ID，然后在输入后立即创建脚本来立即更改输入字段的样式属性来解决此问题。
input[type="submit"] {
font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
display:block;
background-color: pink!important;
color: #FFFFFF!important;
padding: 5px 11px;
letter-spacing: 2px;
border: none;
cursor: pointer;
font-size: 15x;
border-radius: 3px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}
input[type="submit"]:hover {
background-color: red!important;
color: #FFFFFF!important;
}<input
onmouseover="
this.setAttribute('style',
'background: #6ce033 !important; color: #fff !important;'
);"
onmouseout="
this.setAttribute('style',
'background: #40c200 !important; color: #fff !important;'
);"
type="submit"
id="button_ID" />
<script>
var button = document.getElementById("button_ID");
button.setAttribute('style',
'background: #40c200 !important; color: #fff !important;'
);
</script>但是请注意，这两种解决方案都非常棘手。有更好的方法来做这样的事情，但显然这超出了这个问题的范围。
你就不能 add a class to the input ?
input[type="submit"].some-override-class {
background: #40c200 !important;
color: #fff !important;
}
input[type="submit"].some-override-class:hover {
background: #6ce033 !important;
color: #fff !important;
}
覆盖现有 CSS 的最佳方法是使用其他类、ID 或上下文进一步指定其重要性。
关于css - 如何在 HTML 输入对象下使用 JavaScript 覆盖包含 '!important' 的 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42891814/