JavaScript，使用 JQuery 操作 HTML 'style'

Question

我正在创建一个保龄球游戏，我已经创建了按钮 0-10。

例如，当我投出 7 球时，我希望只有 0-3 按钮可用。然后一旦这些 (0-3) 中的一个被点击，所有 (0-10) 按钮应该再次可见。

一直在试图操纵:

style="display: inline;"

到

style="display: none;"

尝试过使用 .toggleClass 和 .removeClass 但由于我没有通过 css 操作它们，所以不确定我的选择。

Answer 1

使用 jQuery，您可以:

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

使用纯 Javascript，您可以:

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

请注意，在 jQuery 中，您可以使用 hide() 和 show() 或直接在您想要的任何值内修改 css 值，区别在于 hide() 等同于 display: none 而 show() 可能等同于 display: block，如果您想设置 inline、inline-block、flex、table 等属性等。您应该使用 jQuery element.css。

检查这个 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>