首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML输入对象下使用JavaScript覆盖包含'!important'的css?

如何在HTML输入对象下使用JavaScript覆盖包含'!important'的css?
EN

Stack Overflow用户
提问于 2019-06-11 06:45:19
回答 1查看 0关注 0票数 0

这个问题在这里已有答案:

  • 压倒!重要的风格

我实际上在wordpress的插件上工作,我有问题动态设置按钮形式(输入[type =“submit”]),因为一些wordpress主题使用“ !important ”属性。

我想在HTML输入对象下覆盖使用JavaScript,因为我想使用php调用一些css值。

在下面的演示中,我自愿将“ !important ”属性放在css样式中以尝试覆盖它。

DEMO

代码语言:javascript
复制
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;
}

代码语言:javascript
复制
<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">

代码语言:javascript
复制
<?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更改样式。

EN

回答 1

Stack Overflow用户

发布于 2019-06-11 15:57:52

由于您似乎没有找到前一个答案中的哪个可以解决您的问题,这里是一个示例实现。

代码语言:javascript
复制
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;
}

代码语言:javascript
复制
<input onmouseover="this.setAttribute('style','background: #6ce033 !important; color: #fff !important;');" onmouseout="this.setAttribute('style','background: #40c200 !important; color: #fff !important;');" type="submit">

有一个错误,按钮最初是粉红色的,并且在鼠标悬停之前不会改变。您可以通过向输入添加唯一ID然后在输入后立即创建脚本来立即更改输入字段的样式属性来解决此问题。

代码语言:javascript
复制
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;
}

代码语言:javascript
复制
<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>

但请注意,这两种解决方案都非常糟糕。有更好的方法可以做这样的事情,但显然这不属于这个问题的范围。

你不能只在输入中添加一个类吗?

代码语言:javascript
复制
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或上下文进一步指定其重要性。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100005190

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档