javascript - Embedded style overriding inline styles? -
I have an embedded style and a function button that changes the style of the button to display through inline style Has: No problem is that embedded style is being overridden inline style. So, the questions are:
- Is inline styles not considered more priority than embedded? Is there anything wrong with my code ??
If nothing is wrong with my code:
- How do I get to embed my inline code embedded style?
HTML
& lt; Div id = "buttonDiv1" style = "float: left;" & Gt; & Lt; Button ID = "BTN1" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div id = "buttonDiv1" style = "float: left; display: none;" & Gt; Button ID = "BTN 2" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div id = "buttonDiv1" style = "float: left; display: none;" & Gt; Button ID = "BTN3" & gt; Change unit & lt; / Button & gt; & Lt; / Div & gt; & Lt; Input id = "text" style = "float: left;" & Gt; & Lt; / Input & gt; & Lt; Div onChange = "jsfunction ()" & gt; & Lt; Div style = "float: left" & gt; Type: & lt; Select ID = "Type selector" & gt; & Lt; Option value = "" disabled disabled style = "display: none;" & Gt; & Lt; / Options & gt; & Lt; Option value = "1" & gt; Instrumental Cables & lt; / Options & gt; & Lt; Option value = "2" & gt; Vertical piping material & lt; / Options & gt; & Lt; Option value = "3" & gt; Electric Cables & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "container" class = "cont" style = "min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" & gt; & Lt; / Div & gt;
JS
function jsfunction () {// from the chart to display var var = document.getElementById ("typeSelector") get receive; If (val.value == 1) {document.getElementById ("btn1") Style.display = "block"; . Document.getElementById ("btn2") style.display = "none"; . Document.getElementById ("btn3") style.display = "none"; } And if (val.value == 2) {document.getElementById ("btn1"). Style.display = "none"; Document.getElementById ("btn2") style.display = "block". . Document.getElementById ("btn3") style.display = "none"; } And {document.getElementById ("btn1"). Style.display = "none"; . Document.getElementById ("btn2") style.display = "none"; Document.getElementById ("btn3") style.display = "block". }}
To display JSFiddle problem:
EDIT: It appears that there was a problem with my demo code, so I pasted the actual code
I removed the extra divas and their float layout and used the display: inline; On your button, they can not break the line:
Sorry, the HTML must be pasted here, otherwise I can not add a Bella:
It should be what you want.
Comments
Post a Comment