js有哪些弹出框&css隐藏元素的方法

精致的猪猪
435 阅读2分钟

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。

不出意外的话，最近应该是面试的高峰期吧 应届生的我特别的焦虑....

js中有哪几种弹出框？

警告框 alert

<script>
    alert("用户名或密码错误！")
</script>

alert应该是我们最常使用的弹出框了，一般校验出错或者后台返回错误都会用这种形式给用户提示 image.png

确认框 comfirm

function handle(){
    if(confirm("你确定要删除吗？") == true) {
        alert("删除成功！");
} else {
    return false;
    }
}

确认框通常出现在需要再次确认的地方，比如说删掉一条数据，是否确认支付等 。confirm()会返回一个Boolean类型的数据，点击确定按钮，返回 true，点击取消按钮 返回 false。我们会把删除的接口请求放在confirm（） == true 里面。

image.png

可输入对话框 prompt

var a = Number(prompt("请输入一个数"));
var b = a + 10;
alert(a + " +10 = " + b)

prompt输入的默认是一个字符串，这里我们把它变成数字类型再参与运算 image.png

css中隐藏元素的方法有哪些？

<div class="box">我出现啦</div>

        .box{
            display: none;
            visibility: hidden;
            opacity: 0;
        }

第一种方法使用 display(用于定义建立布局时元素生成的显示框类型),当 display为none 时，元素隐藏不见。

我比较常见的是这4种

  • none：此元素不会被显示。
  • block：此元素将显示为块级元素，此元素前后会带有换行符。
  • inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
  • inline-block：行内块元素。（CSS2.1 新增的值）
  <span class="one">这个第一个span</span>
  <span>这个第二个span</span>

显示效果为

image.png 将第一个span变成块级元素后.one{ display: block;}

image.png

第二种方法使用 visibility （该属性规定元素是否可见）

  • visible ： 默认值。元素是可见的。
  • hidden ： 元素是不可见的。 - collapse ：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
  • inherit : 规定应该从父元素继承 visibility 属性的值。

第三种方法使用 opacity （改变元素透明度0~1） 1是正常显示， 0是完全透明

avatar
文章
阅读
粉丝