条件式にcssの値を使う方法。

質問

条件式にcssの値を使う方法。

下記の部分が謎なのですが、プロパティ　＝＝　値という形でなぜプロパティの値がnoneだった時となるのでしょうか？

if( toolTip.css("display") == "none" )

$(function() {
$(".tooltip").each(function(){
var toolTip = $('<div class="tooltip-body">');
var toolTipText = $(this).attr("data-tooltip");
toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();
$("body").append(toolTip);
$(this).hover(function(){
if( toolTip.css("display") == "none" ){
var targetPostion = $(this).offset();
var toolTipHeight = toolTip.height();
toolTip.css({
"position": "absolute",
"top": targetPostion.top - toolTipHeight -3 + "px",
"left": targetPostion.left + "px",
"display":"block",
"opacity": "0",
"z-index": "9999"
})
.stop().animate({
"top" : "-=10px",
"opacity": "1"
}, 250);
}
});
});
});

回答No.3

hok212 · ベストアンサー

私が質問の意図を間違って理解しているかもしれませんので補足しておきます。

display と none が同じになってしまうと仰っておりますが、先にも述べましたように「==」 は左項と右項の比較です。
この場合、左項とは toolTip.css("display") です。
これはjQueryを使った記法でわかりにくいので、JavaScript本来の記法で表記すると次の形になります。

document.getElementById('対象要素のID名').style.display

これが左項になり、これで得られる状態は none や block となりますので、右項に none を指定することは何も問題がないことになります。

お礼

document.getElementById('対象要素のID名').style.display
という式自体がその要素のdisplayプロパティの値を取得しなさいという意味なのですね。
値を見たいが最後にプロパティを記載することで値を調べろという意味になるということですね。

回答No.2

hok212

> if( toolTip.css("display") == "none" )
> これだとdisplayとnoneが同じかとなってしまいませんか？
> なでプロパティと値を＝＝にするのでしょうか？

JavaScript において「==」は比較をする際に使います。
数学における「=」の概念とは異なります。

回答No.1

hok212

提示されたスクリプトは JavaScript ですね。
それで「 == 」は 比較演算子 と呼ばれるものです。
条件式（if-else文 等）の左項と右項を比較し、一致する場合に実行されます。
※JavaScriptの比較演算子は他にもいくつかありますので検索するといいでしょう。

CSS の display 属性には none もありますので、その式に問題はないように思えます。

お礼

if( toolTip.css("display") == "none" )

これだとdisplayとnoneが同じかとなってしまいませんか？
なでプロパティと値を＝＝にするのでしょうか？