css - Javascript - Overriding styles previously declared in another function - Stack Overflow

admin管理员组

文章数量:1326694

Ok, this is my HTML

<div id="plus" style="margin-left: 10px; margin-top: 303px;">
      <div id="plus-back"> </div>
      <div id="plus-ex"> X </div>
</div>

NOTE: the #plus element's inline styles was declared previuously by another script

And this is my JS

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav

function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block"
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"
}

Well.. this is what i have. The goal is simple, when you click #plus, this is expanded to show some content, and appears a "X" that is inside #plus-ex, and when you click that "X", #plus go back to the start (that is a div with 48px of height and width thanks to stylesheet). The problem with this, is that hideNav() is not doing a good work. When you click #plus, showNav() function is fired successfully, but after that, when you click the "X" and hideNav() is fired (successfully too), that should apply the initial style, but does anything. I have tested applying another CSS propieties like background-color and works OK, but not with width and height.

I think that the problem is that i can't override the styles applied by showNav()

What should i do?

Ok, this is my HTML

<div id="plus" style="margin-left: 10px; margin-top: 303px;">
      <div id="plus-back"> </div>
      <div id="plus-ex"> X </div>
</div>

NOTE: the #plus element's inline styles was declared previuously by another script

And this is my JS

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav

function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block"
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"
}

Well.. this is what i have. The goal is simple, when you click #plus, this is expanded to show some content, and appears a "X" that is inside #plus-ex, and when you click that "X", #plus go back to the start (that is a div with 48px of height and width thanks to stylesheet). The problem with this, is that hideNav() is not doing a good work. When you click #plus, showNav() function is fired successfully, but after that, when you click the "X" and hideNav() is fired (successfully too), that should apply the initial style, but does anything. I have tested applying another CSS propieties like background-color and works OK, but not with width and height.

I think that the problem is that i can't override the styles applied by showNav()

What should i do?

• javascript
• css
• events
• styles
• overriding

Share Improve this question Follow asked Aug 18, 2013 at 4:40 yukattayukatta 52522 gold badges77 silver badges1616 bronze badges 3

• maybe the problem is .style.display="block" ? – muratgu Commented Aug 18, 2013 at 4:45
• @muratgu No, i deleted .style.display="block" but the problem persist. – yukatta Commented Aug 18, 2013 at 4:50
• @Yavierre: <div> by default will shrink/wrap its height based on its content. I'm afraid you cannot set its height explicitly. – Khanh TO Commented Aug 18, 2013 at 4:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The problem is when you click X the event is bubbling up to the #plus div. You can prevent this by calling:

event.stopPropagation();

Update your code as follows and give it a try:

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav

function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block" // Don't need this line as it's a block element i.e. already a div

    event.stopPropagation(); // add this line
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"

    event.stopPropagation(); // add this line
}

本文标签： cssJavascriptOverriding styles previously declared in another functionStack Overflow