Javascript 检查CSS元素的属性值，并使用结果true或false？

我正在使用jQuery并希望检查元素的属性值（下面是Lodagema_Desc是否可见）。我知道我应该在这里应用布尔变量，但我不完全确定如何应用。我希望检查这是真是假（参见“if vis=true”）

实际上，我正在尝试设置一个div的动画，它将在页面上擦除，并在单击

prio\u img

后变得可见。之后，我想再次点击

prio\u img

得到基本相反的动画

$(document).ready(function() {
    $("#prio_img").click(function() {
        var vis = $("#Lodagema_Desc").is(":visible");
        if (!vis){
             $('#Lodagema_Desc').css({visibility: "visible"}).animate({ 
                width: "1110px", //changes to visible, then animates to the correct width
             }, 800 );}
        else{
            $('#Lodagema_Desc').animate({
                width: "0px",
            }, 800).css({visiblity: "hidden"});
        }
    });
});

编辑：我已经修复了语法错误，但代码仍然存在问题。

您的语法错误

改变

 if vis=false{

到

使用==不使用=

 if (vis==false){

或者只是

---

if（！vis）

（对于false）

if语句的条件需要放在括号中

（）

如下：

if(vis) // == true
if(!vis) // == false

我已更新了您的代码以修复您的语句。注意，添加一个

，然后语句将其反转。我还删除了var，因为您只使用了一次。为了便于阅读，您不妨将条件直接放入
if

$(document).ready(function(){
    $("#prio_img").click(function() {
        // The condition reads: if Lodagema_Desc is not visible, then...
        if(!$("#Lodagema_Desc").is(":visible")){
             $('#Lodagema_Desc').css({visibility: "visible"}).animate({ 
                width: "1110px", //changes to visible, then animates to the correct width
             }, 800 );}
        else{
            $('#Lodagema_Desc').animate({
                width: "0px",
            }, 800).css({visiblity: "hidden"});
        }
    });
});

编辑：

您也可以像这样使用
：hidden
（以避免您反转原始条件）：

您的
if
语法错误。此外，还需要在函数中设置
vis
变量。否则，它只包含加载页面时的可见性，而不是当前的可见性

$(document).ready(function(){
    $("#prio_img").click(function() {
        var vis = $("#Lodagema_Desc").is(":visible");
        if (!vis) {
             $('#Lodagema_Desc').css({visibility: "visible"}).animate({ 
                width: "1110px", //changes to visible, then animates to the correct width
             }, 800 );
        }
        else{
            $('#Lodagema_Desc').animate({
                width: "0px",
            }, 800).css({visiblity: "hidden"});
        }
    });
});


试试这个

var $img = $('img'),
    originalWidth = $img.width();

//Set height
$img.height($img.height());

$('a').click(function(){
    $img.animate({ width: $img.width() == originalWidth ? 0 : originalWidth });
});

您的条件if（vis===false）在语法上是错误的，并抛出js错误。
下面的代码工作正常

$(document).ready(function(){
    var vis = $("#Lodagema_Desc").is(":visible");
    $("#prio_img").click(function() {
        if (vis===false){
            $('#Lodagema_Desc').css({visibility: "visible"}).animate({ 
                width: "1110px", //changes to visible, then animates to the correct width
            }, 800 );}
        else{
            $('#Lodagema_Desc').animate({
                width: "0px",
            }, 800).css({visiblity: "hidden"});
        }
    });
});

Javascript控制台中没有语法错误吗？如果（vis=false）和try@swetha这已经出现在两个答案中。请使用切换。试试这个@Barmar是的，我是。它在角落里挥舞着一个巨大的错误标志，但我没有看它，因为它总是说我有错误（关于文档未定义的某些内容）。我应该检查一下！谢谢你的建议。我使用了切换功能，但是出于个人偏好，我希望Div看起来像是在页面的右侧向外打开。因此，宽度从0px变为1110px，然后再变回来。试试上面的例子。谢谢，这比我以前做的要好得多：）我很高兴这有帮助。如果还有什么事，一定要告诉我。我没有考虑必须在函数内部定义，这是非常有意义的。谢谢你强调这一点。
var $img = $('img'),
    originalWidth = $img.width();

//Set height
$img.height($img.height());

$('a').click(function(){
    $img.animate({ width: $img.width() == originalWidth ? 0 : originalWidth });
});

$(document).ready(function(){
    var vis = $("#Lodagema_Desc").is(":visible");
    $("#prio_img").click(function() {
        if (vis===false){
            $('#Lodagema_Desc').css({visibility: "visible"}).animate({ 
                width: "1110px", //changes to visible, then animates to the correct width
            }, 800 );}
        else{
            $('#Lodagema_Desc').animate({
                width: "0px",
            }, 800).css({visiblity: "hidden"});
        }
    });
});