Change CSS style on button click?

Question

I would like to change some of css style properties on div element when I click button, but I don't have that much experience nor I can find anything online to help me. At the present moment this is how my code looks like.

<button class="button1">Click</button>
<div class="popup_middle">
</div>
<div class="grayout">
</div>

and my CSS looks like this

.grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    visibility: hidden;
    background-color: #000;
    filter: alpha(opacity = 55);
    opacity:.80;
}

.popup_middle{
    position: fixed;
    background: url(../images/bg-food-order.jpg);
    border: none;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 250px;
    margin-top: -125px;
    margin-left: -175px;
    z-index: 100;
    visibility: hidden;
}

Please could you pleas give me some advice or code sample with JS that is going to solve my problem.

Thanks in Advance , David

Have you tried to do this yourself? Can we see that JS code? You used the jQuery tag but I cant tell if you are using it or not — stackErr
– stackErr, Commented Feb 12, 2014 at 21:03
You could add a class on click and give in that class the needed css properites — evanzto
– evanzto, Commented Feb 12, 2014 at 21:04
all I have is this piece of button <button onClick="document.getElementById('popup_middle').style.visibility='visible'">Click</button> — zbora23
– zbora23, Commented Feb 12, 2014 at 21:07

Thomas Taylor · Accepted Answer · 2014-02-12 21:16:27Z

4

Something like

<script type='text/javascript'>

$('.button1').click(function() { $('.popup_middle').hide().css('color', 'blue'); });

</script>

Would hide that popup_middle div and set the text color to blue when you clicked on the button. click() is the event handler

edited Feb 12, 2014 at 21:16

answered Feb 12, 2014 at 21:06

Thomas Taylor

5654 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrey Nelubin Over a year ago

Why don't you using .hide() method instead?

Thomas Taylor Over a year ago

ha this is wrong anyway. i'll edit it (display none is a style)

Alireza moghaddam · Accepted Answer · 2021-03-30 14:52:51Z

1

so if you want to add css class style to a text using a button:=>

          <script>
            function changed(){
            document.getElementById("exp").classList.add("the class style name")};
          </Script>
              <div id="exp">
                <button onclick=" changed()">try it</button>
                <p onclick="changed()">hello world</p>

              </div>

answered Mar 30, 2021 at 14:52

Alireza moghaddam

93 bronze badges

Comments

stackErr · Accepted Answer · 2014-02-12 21:36:19Z

You use getElementById which will look for elements with an id. The div you are looking for has a class but no id. So when you run the code you have, nothing happens because the javascript cant find any element with an id of popup_middle.

To fix this you can change the div to have an Id of popup_middle and your CSS should have #popup_middle.

HTML:

<button onClick="document.getElementById('popup_middle').style.visibility='visible';">Cli‌ck</button>
<div id="popup_middle"></div>
<div class="grayout"></div>

CSS:

.grayout {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    visibility: hidden;
    background-color: #000;
    filter: alpha(opacity=55);
    opacity:.80;
}
#popup_middle {
    position: fixed;
    background: green;
    border: none;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 250px;
    margin-top: -125px;
    margin-left: -175px;
    z-index: 100;
    visibility: hidden;
}

fiddle: http://jsfiddle.net/eLJYZ/2/

Collectives™ on Stack Overflow

Change CSS style on button click?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related