如何在HTML输入对象下使用JavaScript覆盖包含'！important'的css？
如何在HTML输入对象下使用JavaScript覆盖包含'！important'的css？
提问于 2019-06-11 06:45:19
这个问题在这里已有答案：
- 压倒！重要的风格
我实际上在wordpress的插件上工作，我有问题动态设置按钮形式（输入[type =“submit”]），因为一些wordpress主题使用“ ！important ”属性。
我想在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更改样式。
回答 1
Stack Overflow用户
发布于 2019-06-11 15:57:52
由于您似乎没有找到前一个答案中的哪个可以解决您的问题，这里是一个示例实现。
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>
但请注意，这两种解决方案都非常糟糕。有更好的方法可以做这样的事情，但显然这不属于这个问题的范围。
你不能只在输入中添加一个类吗？
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或上下文进一步指定其重要性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005190
复制相关文章
相似问题
腾讯云开发者
