Question

我实际上在wordpress的插件上工作，我有一个动态样式化按钮表单的问题（输入[type =“submit”] ），因为一些wordpress主题使用“！重要的“财产。

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

在下面的演示中，我自愿将css样式中的“！important ”属性设置为试图覆盖它。

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更改样式。

Answer 1

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

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或上下文进一步指定其重要性。~~

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

1 个答案: