vm.$refs及$el

ref 主要有两种用法：

1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。

使用的时候用this$refs（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this refs（ref值）方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。

则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this refsbot$el拿到组件内的html元素

van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm$el 访问。

挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。

重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 >

解决思路：先获取该元素的offsetLeft和offsetTop，然后取它的offsetParent，并向外循环，累加这些left和top，最后得到的就是元素的绝对位置。

var obj = xxx; //这个元素就是目标元素，你可以用任何方式将它传入。  

  

var w = objoffsetWidth, h = objoffsetHeight;  

  

//从目标元素开始向外遍历，累加top和left值  

for (var t = objoffsetTop, l = objoffsetLeft; obj = objoffsetParent;) {  

        t += objoffsetTop;  

        l += objoffsetLeft;  

}

windowonload=function(){

        waterfall();

        windowonscroll=function(){

            

    var parent=documentgetElementById("main");

    var boxs=getByClass(parent,"box");

    var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;

       var documentH=scrollH+documentdocumentElementclientHeight;

    var    lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);

       /763/

     

        if(lastH-350<documentH){      //这里的lastH不减掉350，就无法进入if语句？？？

                                /465/

dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};

for(var i=0;i<dataIntdatalength;i++){

        var divB=documentcreateElement("div");

        divBclassName="box";

        parentappendChild(divB);

        var divP=documentcreateElement("div");

        divPclassName="pic";

        divBappendChild(divP);

        myimg=documentcreateElement("img");

        myimgsrc="/images/"+dataIntdata[i]src;

        

        divPappendChild(myimg);

}

waterfall();

}

}

}

function waterfall(){

    

var oParent=documentgetElementById("main");

var boxs=getByClass(oParent,"box");

var boxW=boxs[0]offsetWidth;

var num=Mathfloor(documentdocumentElementclientWidth/boxW);

oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";

  

    boxHarr=new Array();

    for(var i=0;i<boxslength;i++){

        if(i<num){

            boxHarrpush(boxs[i]offsetHeight);

        }else{

           

            var minH=Mathminapply(null,boxHarr);

            var minHindex=getminHindex(boxHarr,minH);

            boxs[i]styleposition="absolute";

            boxs[i]styletop=minH+"px";

            boxs[i]styleleft=minHindexboxW+"px";

            //boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";

            boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;

        }

    }

}

function getByClass(parent,clsName){

    a=parentgetElementsByTagName('');

    var arr=[];

    for(var i=0;i<alength;i++){

        if(a[i]className==clsName){

            arrpush(a[i]);

        }

    }

    return arr;

}

function getminHindex(arr,minH){

    

    for(var i in arr){

        if(arr[i]==minH)

            return i;    

    }

}

css得作用就是控制网页样式，设置css会影响元素得位置。并不是说css影响了JavaScript获得offsettop，而是你两个li设置得css不同，第一个你设置成了浮动，所以他脱离了本身得父元素想body靠近，而你得第二个li并没有设置任何得css，所以他还在原处，这样就导致了两个li得位置不同了，所以JavaScript获得的值也就不一样了，如果你把第二个li得css设置得与第一个一样，那么他们得位置是在同一高度得，这样就得到得值一样。你可以试试看。css改变了元素得位置，那么offsettop不一样 就很正常了。

不懂就直接hi我就行了

1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。

2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。

3、得到的结果是一个数组对象，只要获取里面的top数据就行了。

4、使用log方法，把数据输出到浏览器的控制台。

5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。

6、然后看一下控制台上的数据，得到距离为439的像素。

一个中能否添加两个js脚本 <script type=text/javascript charset=utf-8 src=要应用的js文件路径></script><script language="javascript" src=要应用的js文件路径> 加十个都没问题。只要将它们放到头标签之前就ok了。

HTML页面如何加载两个js脚本

<script src=xxx1js></script><script src=xxx2js></script>

关于 添加JS脚本函数PageOnLoad()

这是当页面初次载入时要进行的动作

<BODY onLoad="PageOnLoad()">

如何后台动态添加js脚本

1

2

3

4

function loadJs(file) {

var head = $("head")remove("script[role='reload']");

$("<scri" + "pt>" + "</scr" + "ipt>")attr({ role: 'reload', src: file, type: 'text/javascript' })appendTo(head);

}

1

2

3

4

5

6

7

8

9

10

11

function reloadAbleJSFn(id,newJS){

var oldjs = null;

var t = null;

var oldjs = documentgetElementById(id);

if(oldjs) oldjsparentNoderemoveChild(oldjs);

var scriptObj = documentcreateElement("script");

scriptObjsrc = newJS;

scriptObjtype = "text/javascript";

scriptObjid = id;

documentgetElementsByTagName("head")[0]appendChild(scriptObj);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script type=text/javascript src=/jqueryjs></script>

<script type=text/javascript>

$(function()

{

$('#loadButton')click(function(){

$getScript('newjs',function(){

newFun('"Checking new script"');这个函数是在newjs里面的，当点击click后运行这个函数

});

});

});

</script>

</head>

<body>

<button type=button id="loadButton">Load</button>

为什么我在HTML文件中加了两个js脚本，会有一个脚本不能运行呢？求解答

show me the code

F12 看报错了没有，报错行之后的代码不会执行

两个jsp页面可以共享一个js脚本么？

当然可以了，就算你的工程里每一个jsp里面都用同一个js都没问题啊

一个jframe中能否添加多个jpanel？

可以，但的注意布局,

缺省布局是borderLayout的话，东南西北中五个区域各方一个，第六个就放不了了

使用null布局，给各个jpanel直接定位即可

odoo 如何在编辑页面添加js脚本

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种 *** 作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。

Netscape公司在最初将其脚本语言命名为LiveScript。在Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”[2]，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[3]。JavaScript与Java名称上的近似，是当时网景为了营销[4]考虑与Sun公司达成协议的结果。为了取得技术优势，微软推出了JScript脚本语言。Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。现两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非是作为给程序人员的编程语言来推广和宣传，但是JavaScript具有非常丰富的特性。

前身是Live Script

正式名称：ECMAScript

ECMAScript-262是JavaScript标准，基于网景（Netscape）公司提出JavaScript语言和微软公司提出的JScript语言

ECMA开始于1996年，在1997年7月，采纳了首个版本，1998年，该标准成为了国际ISO标准

中 在<tr>中能否添加属性

当然有啦

ACCESSKEY aessKey 设置或获取对象的快捷键。

ALIGN align 设置或获取对象相对于显示或表格的排列方式。

ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。

BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。

BGCOLOR bgColor 不推荐。设置或获取对象后面的背景颜色。

BORDERCOLOR borderColor 设置或获取对象的边框颜色。

borderColorDark 设置或获取用于绘制对象 3D 边框的两种颜色的一种。

borderColorLight 设置或获取用于绘制对象 3D 边框的两种颜色的一种。

canHaveChildren 获取表明对象是否可以包含子对象的值。

canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。

CH ch 设置或获取可用于实现对象的你自己的 ch 功能的字符串。

CHOFF chOff 设置或获取可用于实现对象的你自己的 chOff 功能的字符串。

CLASS className 设置或获取对象的类。

clientHeight 获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。

clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。

clientWidth 获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

DIR dir 设置或获取对象的阅读顺序。

disabled 获取表明用户是否可与该对象交互的值。

END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。

firstChild 获取对象的 childNodes 的第一个子对象的引用。

hasMedia 获取一个表明元素是否为 HTML+TIME 媒体元素的 Boolean 值。

HEIGHT height 设置或获取对象的高度。

HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。

ID id 获取标识对象的字符串。

innerHTML 设置或获取位于对象起始和结束标签内的 HTML。

innerText 设置或获取位于对象起始和结束标签内的文本。

isContentEditable 获取表明用户是否可编辑对象内容的值。

isDisabled 获取表明用户是否可与该对象交互的值。

isMultiLine 获取表明对象的内容是包含一行还是多行的值。

isTextEdit 获取是否可使用该对象创建一个 TextRange 对象。

LANG lang 设置或获取要使用的语言。

LANGUAGE language 设置或获取当前脚本编写用的语言。

lastChild 获取该对象 childNodes 中最后一个子对象的引用。

nextSibling 获取对此对象的下一个兄弟对象的引用。

nodeName 获取特定结点类型的名称。

nodeType 获取所需结点的类型。

nodeValue 设置或获取结点的值。

offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。

offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。

offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。

offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

onOffBehavior 获取表明指定的 Microsoft® DirectAnimation® 行为是否正在运行的对象。

outerHTML 设置或获取对象及其内容的 HTML 形式。

outerText 设置或获取对象的文本。

ownerDocument 设置或获取结点关联的 document 对象。

parentElement 获取对象层次中的父对象。

parentNode 获取文档层次中的父对象。

parentTextEdit 获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。

previousSibling 获取对此对象的上一个兄弟对象的引用。

readyState 获取表明对象当前状态的值。

rowIndex 获取对象在表格的 rows 中的位置。

scopeName 获取为该元素定义的命名空间。

scrollHeight 获取对象的滚动高度。

scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollWidth 获取对象的滚动宽度。

sectionRowIndex 获取对象位于 tBody, tHead, tFoot 或 rows 中的位置。

sourceIndex 获取对象在源序中的依次位置，即对象出现在 document 的 all 中的顺序。

STYLE 为该设置元素设置内嵌样式。

SYNCMASTER syncMaster 设置或获取时间容器是否必须在此元素上同步回放。

SYSTEMBITRATE 获取系统中大约可用带宽的 bps。

SYSTEMCAPTION 表明是否要显示文本来代替演示的的音频部分。

SYSTEMLANGUAGE 表明是否在用户计算机上的选项设置中选中了给定语言。

SYSTEMOVERDUBORSUBTITLE 指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕。

TABINDEX tabIndex 设置或获取定义对象的 Tab 顺序的索引。

tagName 获取对象的标签名称。

tagUrn 设置或获取在命名空间声明中指定的统一资源名称(URN)。

TIMECONTAINER timeContainer 设置或获取与元素关联的时间线类型。

TITLE title 设置或获取对象的咨询信息(工具提示)。

uniqueID 获取为对象自动生成的唯一标识符。

VALIGN vAlign 设置或获取文本和其它内容在对象内的垂直方向上如何排列。

WIDTH width 设置或获取对象的宽度。

chrome中怎么添加userjs脚本？是不是首先要安装个扩展？

直接打开小乐图客扩展的泡泡框中的JS代码功能，

将JS代码粘贴后，GO即可。

以上就是关于vm.$refs及$el全部的内容，包括:vm.$refs及$el、如何获取一个dom元素的绝对位置、vue里，我用jq去获取元素的offsettop出现问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！