삽입 스타일이 인라인 스타일을 대체합니까?

그래서 삽입 된 스타일과 버튼의 스타일을 표시 할 인라인 스타일로 변경하는 기능이있는 버튼이 있습니다. 문제는 삽입 된 스타일이 인라인 스타일을 무시하는 것입니다. 따라서 질문은 다음과 같습니다.삽입 스타일이 인라인 스타일을 대체합니까?

인라인 스타일이 포함 된 것보다 우선해야합니까? 내 코드에 문제가 있습니까?

내 코드와 아무 잘못이없는 경우 :

가 어떻게 내 인라인 코드가 포함 된 스타일을 재정의 할합니까이?

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>

JSfiddle이 문제를 설명하기

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"; 
} 
}

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

편집 : 거기 내 데모 코드에 문제가 있었다 그래서 실제를 부착 나타납니다 코드

출처

2014-07-27 Genome314

. 스타일을 잘못 입력했습니다. js에서 다음에 콘솔을 확인하십시오. Css-tricks.com은 css 특수성에 대해 모두 알려 줄 것입니다 : http://css-tricks.com/specifics-on-css-specificity/ – Brunis

@Brunis 그렇습니다. 데모 코드에는 문제가 없었습니다. 그러나 내 실제 코드에 문제가 있습니다. 업데이트 된 게시물 참조 – Genome314

당신은 html을 온 곳에서 위반하고 있으며, id는 고유하고, 모든 것이 떠 다니는 것을 멈추고, 모든 것이 자연스럽게 왼쪽에서 오른쪽으로 배치됩니다. 문제는 귀하의 디스플레이 : 없음입니다; 바깥 쪽 div에 있지만 js의 버튼을 변경하고 있습니다. 따라서 모든 여분의 쓰레기를 제거하고 잘못된 요소를 선택하지 않는 것이 더 쉽습니다. 이벤트 속성은 소문자이며 변경을 기대하는 항목 인 onchange 이벤트를 onchange 이벤트에 넣습니다. 나는 당신이 시작해야한다고 생각한다. :) – Brunis

초과 div의 플로트 레이아웃을 삭제하고 display : inline; 그들은 줄 바꿈하지 않는 귀하의 버튼 :

<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/

것은 무엇을해야 :

미안, 그렇지 않으면 내가 바이올린을 링크 할 수 없습니다, HTML 여기에 붙여 넣을 수 있습니다 당신이 찾고있는.

출처

2014-07-27 09:17:57 Brunis

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

출처

2014-07-27 08:54:37

감사합니다. - 인라인 스타일에 중요하게 추가 할 수 있는지 알지 못했습니다. – Genome314

의 철자가 잘못되었습니다. 잘못된 코드를 대답으로 표시하지 마십시오. – Brunis

삽입 스타일이 인라인 스타일을 대체합니까?

답변

관련 문제