纯js判断元素是否显示 纯js判断元素是否显示某个元素

原生js如何判断元素出现在可视区

释义： Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离 var se = document.documentElement.clientHeight //浏览器可见区域高度。

前端 通常在处理瀑布流，或者懒加载等情况时 需要判断元素是否在用户的可视区域。其实有一个非常简单的方法 就能够解决这类的判断问题：TIP：document.documentElement在ie7及ie7以下会多出两个像素。

当dom元素的中心坐标的X及Y坐标均小于显示窗口的顶部，且大于显示窗口的底部坐标时，那么就可以判断该坐标在可见区域。首先是窗口的顶部坐标，顶部坐标就是页面的滚动条滚动的距离。

因此在用js对某个元素的属性进行操作时，应先判断元素是否存在。

比如第一屏未出现支付按钮时，显示底部悬浮按钮，当页面下滑出现支付按钮，则底部悬浮按钮消失。

相关问答

Q1: JS判断DIV是否是隐藏或显示

1、如果没有，则添加一个hide的样式，即隐藏div。04 运行页面，我们点击按钮，如果div是正在显示的，点击后就会隐藏，如果是隐藏状态的，点击后就会显示。

2、首先，打开html编辑器，新建一个html文件，例如：index.html。

3、img src=images/imgjpg alt=这里是第一张图片 改为 img src=images/imgjpg alt=这里是第一张图片 onerror=boxstyle.display=none 剩下的四张图片的代码也照这样修改。

4、使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。display属性 定义和用法 display 属性规定元素应该生成的框的类型。

Q2: 如何利用Vue.js库中的v-if内部指令判断元素显示

1、在 Vue.js ，使用 v-if 指令判断元素显示 Yes在 中配合 v-if 条件渲染一整组 因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，此时可以把一个 元素当做包装元素，并在上面使用 v-if。

2、v-show是通过其值为true或者false来决定所包含的元素是否显示。

3、这个元素就会被隐藏。请注意，v-show指令只是通过修改元素的display样式属性来决定是否显示元素，所以它不会对文档的布局产生影响。如果你想要在元素的显示状态发生变化时对布局产生影响，可以使用v-if指令。

4、vuev-if放到方法中，1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子，是Vue官方的简单实例。

5、最后，将result数组渲染到页面上，可以使用v-for指令遍历数组中的元素，并将它们渲染成列表。

Q3: js判断页面元素是否存在

1、这在IE浏览器中往往会弹出一个js错误提示框，影响用户体验。所以比较好的做法是，在访问页面元素的属性或方法之前，先判断此页面元素是否存在。

2、因此在用js对某个元素的属性进行操作时，应先判断元素是否存在。

3、如果这里不判断ID元素是否存在的话，那直接对ID元素添加选择项，当ID不存在时，就会出现JS错误。

4、includes和indexOf方法只能查找number和string。

Q4: 如何用JS判断网页中某个id的网页元素是否存在

1、如果这里不判断ID元素是否存在的话，那直接对ID元素添加选择项，当ID不存在时，就会出现JS错误。

2、这在IE浏览器中往往会弹出一个js错误提示框，影响用户体验。所以比较好的做法是，在访问页面元素的属性或方法之前，先判断此页面元素是否存在。

3、如果是为知的，var z=document.getElementById(zhang)； if(z==null){alert(id为空)；}，说明没有这个id=zhang的，也就是id为空。

4、如果这里不判断ID元素是否存在的话，那直接对ID元素添加选择项，当ID不存在时，就会出现JS错误。找了一下，代码如下：script type=text/javascriptfunction exist(id){以上代码应当能看明白吧，不存在就返回false 。

5、可以使用js的attr方法实现用js获取id元素内容。具体步骤如下：需要准备的材料分别是：电脑、浏览器、ultraedit。在ue编辑器中新建一个空白的html文件，js文件。在ue编辑器中输入以下html代码。

纯js判断元素是否显示的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于纯js判断元素是否显示某个元素、纯js判断元素是否显示的信息别忘了在本站进行查找喔。