JavaScript, Manipulating HTML 'style' using JQuery

Question

I am creating a bowling game and I have created buttons 0-10.

When I bowl a 7, for example, I'd like only buttons 0-3 to be available. Then once one of these (0-3) has been clicked, all the (0-10) buttons should be visible again.

Have been trying to manipulate:

style="display: inline;"

To

style="display: none;"

Have tried using .toggleClass and .removeClass but since I'm not manipulating these via the css, not sure of my options.

That's CSS, not a class. If you created a "hidden"class that applied display: none, then toggled that class it would work. — Carcigenicate
– Carcigenicate, Commented Apr 23, 2017 at 17:55
I don't fully understand your question since I don't bowl, but it looks like jQuery's hide() and show() functions will be useful to you — Rohit Chatterjee
– Rohit Chatterjee, Commented Apr 23, 2017 at 17:56
Using $("#your-button").hide() sets the style to style="display: none;". Similarly, $("#your-button").show() removes that style. — acdcjunior
– acdcjunior, Commented Apr 23, 2017 at 17:58

Sebastián Palma · Accepted Answer · 2017-04-23 18:23:20Z

2

With jQuery you can:

$('element').css('display', 'none|block');

With pure Javascript you can:

document.querySelector('element').style.display = 'none|block';

Note that in jQuery you can use hide() and show() or to modify directly the css value within any value you want, the difference is that hide() is equivalent to display: none and show() could be equivalent to display: block, if you'd like to set properties like inline, inline-block, flex, table, etc. you should use the jQuery element.css.

Check this playground:

let el = $('.hallo');
$('.hide').click(function() {
  el.hide();
});
$('.show').click(function() {
  el.show();
});
$('.css').click(function() {
  el.css('display', $('.prop').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 class="hallo">Hallo</h1>

Set the display value <input type="text" name="prop" class="prop">

<br><br>

<button class="hide" type="submit">jQuery hide()</button>
<button class="show" type="submit">jQuery show()</button>
<button class="css"  type="submit">jQuery css()</button>

edited Apr 23, 2017 at 18:23

answered Apr 23, 2017 at 17:59

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

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

3 Comments

acdcjunior Over a year ago

Show doesn't set display: block. It is actually context-sensitive. Example: paste in the browser console: $("<span>").show()[0] and $("<div>").show()[0]. Notice the first outputs <span style="display: inline;"></span> and the second <div style="display: block;"></div>.

Sebastián Palma Over a year ago

That's relative @acdcjunior, "... This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline."

acdcjunior Over a year ago

I'm not sure what you mean, but I think this last statement of yours fits what I meant by "context-sensitive", no?

Collectives™ on Stack Overflow

JavaScript, Manipulating HTML 'style' using JQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related