js 获取dom 控制显隐

2024-10-17

JS/jquery实现鼠标控制页面元素显隐

最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. mouseout和mouseleave 对于鼠标指针的移入和移出,就涉及到了mouseover.mouseout和mouseleave事件. mouseover:当鼠标指针移到目标元素时触发该事件: mouseout:当鼠标指针移出目标元素或其子元素时,都会触发该事件: mouseleave:只有到

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

js获取dom对象style样式的值

js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(obj.currentStyle){//兼容IE return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

js 获取DOM的style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>计算元素样式</title>

js获取dom元素的子元素,父元素,兄弟元素小记

原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获取a的全部子节点: var c = a.parentNode; //获取a的父节点: var d = a.nextSibling; //获取a的下一个兄弟节点 var e = a.previousSibling; //获取a的上一个兄弟节点 var f = a.firstChild; //获取a的第一个子节点

js 控件样式显隐和赋值

控制样式显示: $("#againMetting")[0].style.display = "inline";//显示 $("#againMetting")[0].style.display = "none";//隐藏 document.getElementById("conference_type").style.visibility="visible"; document.getEl

JS获取DOM元素

1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2.children:获取元素节点,浏览器表现相同.因此建议使用children. childNodes返回的是节点的子节点集合,包括元素节点.文本节点还有属性节点.children返回的只是节点的

js操作div的显隐

<!DOCTYPE html><html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> * { margin: 0; padding: 0; font

[原]js获取dom元素的实际位置及相对坐标

关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 用法: var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 获取相对位置: var bodyRect

js 获取dom 为null 测试

<!DOCTYPE html> <html> <head> </head> <body> <h1> 这是H1 </h1> <div id="div1"> </div> <script type="text/html" id="toolbar"> <input type="text" class=&quo

js获取dom节点之 id 获取

在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发现,直接用id名字调用竟然也可以正确运行: myid.style.width = pc+"%"; 最后找度娘问了问. 看到Mrcxt的博客里面有这个问题,问题的答案是: 这个最初是 IE 里面的,后来 firefox chrome 好像也支持了. 不建议使用,这个不是标准里面的,将来不一定

vue v-if控制显隐，页面加载出现闪现 v-cloak

<div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-else-if="type === 'C'" v-cloak> C </div> <div v-else v

js获取dom节点

var s= document.getElementById("test");del_ff(s); //清理空格var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点var fc=s.firstChild; //获得s的第一个子节点var lc=s.lastCh

Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现

最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1.首先npm安装,大家都懂的. npm install vconsole 2.在合适的地方新建一个文件vconsole.js,内容如下: import Vconsole from 'vconsole' let vConsole = new Vconsole() export default vCon

JS获取HTML DOM元素的8种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

js点滴知识(1) -- 获取DOM对象和编码

在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别先前总以为,二者是一样的,最近才知道,二者是不同的: 前者使用var jsTab = document.getElementById("tab");//其中tab为所选择dom对象id的属性值. 后者var jqTab = $("#tab");//不仅需要id属性值,还需要加上#,这是jquery所规定的

原生JS获取HTML DOM元素的8种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElement是专门获取htm

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸, 尤其是 document.getElementById 和 document.getElementsByClassName, 看看下面截图,用上面2种方法获取到元素并添加点击事件后,控制台会打印出什么呢? 可能有小伙伴晃眼一看,这么简单,不就是 1和2 吗,真的是这样吗?下面看看控制台的打印截图结果是只打出了1,为什么没有打印出2呢? 现在我们把2种获取DOM的方法打印出来,如下截图, console.log(

js 获取dom 控制显隐

热门专题