Question

我想从div中检测css display。如果display:block，请将图标更改为-，如果display:none将图标更改为+。

我尝试使用此代码但不起作用。

if($('#ceo').css('display') == 'none'){ 
    $("#button img").css({top:"-18px"});
} else {
    $("#button img").css({top:"9px"});
}

我想制作可折叠的树形结构。这是我的Fiddle

Answer 1

我做了很大的改动并重写了一些代码。现在看起来不错：见demo in jsfiddle

function transform(element, direct) {
    var value;
    if (direct == 1) {
        value = "9px";
    } else {
        value = "-18px";
    }
    $("img", element).stop().animate({
        top: value
    }, {
        queue: false,
        duration: 200
    });
}

$(document).ready(function () {
    $("#button").click(function () {
        // Check if #ceo display:block, set image to minus
        if ($('#ceo').css('display') == 'none') {
            transform($("#button"), 1);
        } else {
            transform($("#button"), 2);
        }
        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function () {
        if ($('#division').css('display') == 'none') {
            transform($("#button2"), 1);
        } else {
            transform($("#button2"), 2);
        }
        $("#division").fadeToggle("fast", "linear");
    });
});

Answer 2

我自己在JS方面不是很好。我在http://jsfiddle.net/jennift/DESkX/1/中的代码有效，但我确信它可以比我的更精简：

$(document).ready(function(){
    $("#button").click(function(){

        // Check if #ceo display:block, set image to minus
        if($('#ceo').css('display') == 'none'){ 
            $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
        } else {
            $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});
        }

        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function(){  
        if ($("#division").css('display') == 'none') {
            $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
        } else {
            $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});                    
        }

        $("#division").fadeToggle("fast", "linear");
    });

});

Answer 3

您可以使用计算样式获得实际显示值。

window.getComputedStyle( document.getElementById("#ceo"), null).getPropertyValue("display")

$（ '＃CEO'）。CSS（ '显示器'）仅显示内联样式显示值。

Answer 4

你可以尝试这个javascript代码

function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("maximze_icon"))
  {
  element.src="images/minimize_icon.gif";
  }
else
  {
  element.src="images/maximze_icon.gif"; 
  }
}
var state = 'block';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

和html代码如下所示....

<img id="myimage" onclick="showhide('div1'); changeImage()" src="images/minimize_icon.gif"><a href="#" onclick="showhide('div1'); changeImage()">Root</a>

Answer 5

这可能正是您所期待的：

$(function(){
    $("#button2").hover(function(){
        $("img", this).stop().animate({top:"9px"},{queue:false,duration:200});
    }, function() {
        $("img", this).stop().animate({top:"-18px"},{queue:false,duration:200});
    });
});

$(document).ready(function(){
    $("#button").click(function(){

        // Check if #ceo display:block, set image to minus
        if($('#ceo').css('display') == 'none'){ 
            $("#button img").css({top:"9px"});
        } else {
            $("#button img").css({top:"-18px"});
        }

        $("#ceo").fadeToggle("fast", "linear");
        $("#button2").fadeToggle("fast", "linear");
    });

    $("#button2").click(function(){
        $("#division").fadeToggle("fast", "linear");
    });
});

Demo Here>>

如何检测div中的css属性

5 个答案: