Question

所以我有一个带嵌入式样式的按钮和一个通过内联样式更改按钮样式的功能来显示：none。问题是嵌入式样式似乎压倒了内联样式。所以，问题是：

内联样式不应该优先于嵌入式吗？我的代码有问题吗？

如果我的代码没有任何问题：

如何让我的内联代码覆盖嵌入式样式？

HTML

<div id="buttonDiv1" style="float:left;"><button id="btn1">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn2">Change units</button></div>
<div id="buttonDiv1" style="float:left; display:none;"><button id="btn3">Change units</button></div>
<input id="text" style="float:left;"></input>

<div onChange="jsfunction()">
<div style="float: left">Type: <select id="typeSelector">
  <option value="" disabled selected style="display:none;"></option>
  <option value="1">Instrumental Cables</option>
  <option value="2">Erected Piping Materials</option>
  <option value="3">Electric Cables</option>
</select>
    </div></div>

<div id="container" class="cont" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JS

    function jsfunction(){
//Get from user which chart to display
var val = document.getElementById("typeSelector");

if(val.value==1){
document.getElementById("btn1").style.display="block";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="none";
}
else if(val.value==2){
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="block";
document.getElementById("btn3").style.display="none";
}
else{
document.getElementById("btn1").style.display="none";
document.getElementById("btn2").style.display="none";
document.getElementById("btn3").style.display="block";
}
}

JSfiddle演示问题：http://jsfiddle.net/4T4pb/1/

编辑：我的演示代码出现问题，所以我贴了实际的代码

Answer 1

function func(){
    document.getElementById("change").stlye.display="none !important";
}

Answer 2

我删除了多余的div和它们的浮动布局并使用了display：inline;在你的按钮上，所以他们不会破坏这条线：

抱歉，必须在这里粘贴html，否则我无法链接小提琴：

<button id="btn1">Change units</button>
<button id="btn2" style="display: none;">Change units</button>
<button id="btn3" style="display: none;">Change units</button>
<input id="text"></input>

http://jsfiddle.net/4T4pb/2/

那应该是你要找的东西。

嵌入式样式覆盖内联样式？

2 个答案: