display:noneで消したボタンをshowで再表示させたい

css上で記述したdisplay:noneで消したボタンをjavascript上のshowで再表示させたいです。

エラーは特に出ていません。
lengthが0であるにも関わらず、cssで記述したdisplay:noneが優先されてボタンが表示されません。
また、display:noneをしないと、lengthが1の時ボタンが一瞬だけ表示されて消えるのでそれを避ける為にしています。

該当のソースコード

css
1
2.gaia-app-statusbar-action {
3    
4    display: none !important;
5  
6}

css
1
2.gaia-app-statusbar-actionmenu-wrapper .gaia-app-statusbar-action {
3    min-width: 80px;
4    max-width: 288px;
5    overflow: hidden;
6    height: 40px;
7    margin: 3px 8px 3px 0;
8    vertical-align: middle;
9    display: inline-block;
10}
11
12

javascript
1if(records.length == 0){
2        $(reportbutton).show();
3      }
4      else{
5        $(reportbutton).hide();
6      }

補足情報（FW/ツールのバージョンなど）

noneの後ろにimportantを付けているのは別のファイルのcssがdisplay:inline-blockを付けていてそちらが優先になってしまう為です。
（上から二番目のcssのソースコードです。）このcssファイルは持っていないので書き込めません。
プログラム初心者なので、説明不足な点があるかもしれません...

x_x

2018/11/29 08:59

別のファイルの内容も提示したほうがいいかと思います。!importantは必要でないかもしれません

行動規範の内容に同意します

回答2件

ベストアンサー

詳細度が小さいため別のファイルのものが優先されていると思いますが、同じなら後のほうが使われます。
ここで !important をつけてしまうと制御が難しくなってしまいます。

CSS
1.gaia-app-statusbar-action,
2.gaia-app-statusbar-actionmenu-wrapper .gaia-app-statusbar-action {
3  display: none;
4}

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

投稿2018/11/29 09:16

x_x

総合スコア13749

inamisan

2018/11/29 09:26

コメント頂きありがとうございます。無事解決しました！

行動規範の内容に同意します

試してみました。!important が付いてると出てこないみたいですね。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>test</title>
6<style>
7  .test-0 { background:#ffff00; margin:1em; }
8  .test-1 { background:#aaff00; margin:1em; }
9  .test-2 { background:#00ffff; margin:1em; }
10
11  /*
12    .test-1 の要素は show/hide で表示・非表示が切り替わりますが
13    .test-2 の要素は表示 show で表示されないようです
14   */
15  .test-1 { display:none; }
16  .test-2 { display:none !important; }
17</style>
18<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
19<script>
20    $(function() {
21      
22      $(".trigger-show").on("click", function() {
23        $(".hoge").show();
24      });
25      
26      $(".trigger-hide").on("click", function() {
27        $(".hoge").hide();
28      });
29    });
30</script>
31</head>
32<body>
33
34  <button class="trigger-show">show</button>
35  <button class="trigger-hide">hide</button>
36
37  <div class="hoge test-0">てすと</div>
38  <div class="hoge test-1">初期 none</div>
39  <div class="hoge test-2">初期 none 強制</div>
40  
41</body>
42</html>