こんにちは、さるまりんです。
前回、CSSのdisplay: noneが効かない時にどうするかについて書きました。
JavaScriptでCSSのstyleを操作した時も同じようなことがあります。
displayにnoneを設定しようと
document.getElementById('elem-a').style.display = 'none';こう↑してみました。
こうしたらidがelem-aの要素は消えてくれるかと思ったらダメでした。。
document.getElementById('elem-a').style.display = 'none !important';これ↑もダメででした。
どうしましょう。
cssTextプロパティ
displayではなくcssTextというプロパティを設定することで実現できました。
document.getElementById('elem-a').style.cssText = 'display:none !important';気をつけないといけないのはすでにcssTextが設定されているかもしれないのでそれを上書きしてしまわないように
cssText = document.getElementById('elem-a').style.cssText;
cssText += ';display:none !important;';
document.getElementById('elem-a').style.cssText = cssText;みたいにした方がいいかもです。
setPropertyメソッド
もう一つの方法です。setProperty()メソッドを使うこともできます。
setProperty()メソッドでは3番目の引数で優先度を設定することができます。
document.getElementById('elem-a').style.setProperty("display", "none", "important");これで同じように優先度をimportantにしてelem-aの要素を非表示にすることができます。
jQueryで
jQueryではどうでしょうか。
jQueryでは
$('#elem-a').hide();としても消えないことがあります。
理由は同じで優先順位で効かないことがあるのです。
その場合はcssTextを変更します。
$('#elem-a').css('cssText', 'display: none !important');ちなみにdisplayを操作しようとしても動作しないです。なのでこれ↓はダメ。
$('#elem-a').css('display', 'none !important');JavaScriptの時と同じですね。
上書きを注意しなければなのも同じです。
cssText = $('#elem-a').css('cssText');
cssText += ';display:none !important;';
$('#elem-a').css('cssText', cssText);表示するblockやshow()が効かない時も同じようにできます。
仕組みがわかると納得です。
読んでくださってありがとうございました。
それではまた！