在javascript中将样式显示从none更改为block

Changing the style display from none to block in javascript?

本文关键字：none block 显示 javascript 样式      更新时间：2023-09-26

这里是html代码片段

<li style="opacity: 1;">
    <a id="LinkDisplay" class="optionsDropDown" style="color:#FF0000;display:none" href="javascript:showThisLink('LinkId');">
</li>

这是在加载时调用的jquery函数

$(function () {
    $.ajax({
        url: url,
        dataType: 'json',
        data: '',
        type: 'POST',
        success: function (data) {
            alert("Test");
            document.getElementById("LinkDisplay").style.diplay="block"; // line 1
            // after this line execution i should see the link as i have
            // changed the link display from none to block but it is still invisible
        });
    });
}

第1行执行后，我不确定为什么我的链接不可见

您没有更改代码中的显示属性

 document.getElementById("LinkDisplay").style.display="block"

在第1行之后将此代码插入函数

由于您使用的是jQuery，您可以直接编写

$("#elemId").show()

问题是显示在以下行中的拼写：

document.getElementById("LinkDisplay").style.display="block";

父级li设置为opacity: 0，使其透明。

您需要将其不透明度更新为1才能使其可见。

替换此：

document.getElementById("LinkDisplay").style.color = "#FF0000";

这个：

$('#LinkDisplay').show().parent('li').css({opacity: 1});

第二行是jQuery（因为您已经在使用jQuery，并且更容易找到父节点）-它找到LinkDisplay链接并将display: none更改为display: block，然后更改父li的不透明度使其可见。

工作jsFiddle

使用jQuery:

$('#LinkDisplay').css('display','block');
$('#LinkDisplay').parent().css('opacity','1');

看起来你已经在使用jquery了，所以你可以通过使用$selector语法来简化一点：

$('#LinkDisplay').css('display', 'block')

您也可以使用jQuery show方法来缩短第一部分，如下所示：

$('#LinkDisplay').show()

jQuery选择器可以按ID或类查找元素，使用#表示ID，.表示类。jQuery-css方法允许您使用各种方法获取和设置属性。jQuery父方法可以快速地从DOM中的一个元素向上遍历以查找其他标记。

相关文章：