js 如何获取对象名称_框架

像你所说的abc是字面量，不好找；不过function可以很好找到，不知道是不是你要找的效果：

function abc(){};这里定义了一个函数，通过toString()可以获取到函数的字符串，然后通过正则表达式可以获取到声明的abc，呵呵，之前看angularjs里面的一段代码，希望对你有用

1、clientWidth / clintHeight

clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight

clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom

注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）

注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）

2、clientTop / clientLeft

clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）

clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）

没有滑动条的效果代码如下：

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

</script>

</html>

以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)

有滚动条的代码如下,

在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjclientHeight);

consolelog(contentObjclientWidth);

consolelog(contentObjclientTop);

consolelog(contentObjclientLeft);

</script>

</html>

最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)

201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)

3、offsetHeight / offsetWidth

offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度

注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<title>获取元素的高度和宽度</title>

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

</style>

</head>

<body>

</div>

</body>

//获取content对象

var contentObj = documentgetElementById("content");

consolelog(contentObjoffsetHeight);

consolelog(contentObjoffsetWidth);

consolelog(contentObjoffsetLeft);

consolelog(contentObjoffsetTop);

</script>

</html>

输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)

offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)

4、offsetTop / offsetLeft

offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离

offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离

5、scrollHeight / scrollWidth

scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值

scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding

6、scrollTop

scrollTop 元素滚动的距离

我有一个想法就是首先遍历该集合,然后将id替换成有序的索引

for（var i = 0 ,i<listlength ,i++）{

list[i]id=i;

}

通过该id的索引可以很方便的找出数组中对应的变量，

list[对象id]

这样做适合于大量数据查找对应属性的 *** 作，只需要遍历一遍，后续的所有查找动作都可以通过索引直接完成。

经过本人测试

find方法比直接遍历慢十倍，比直接通过索引查询慢一百倍，

综上，还不如直接用遍历来的快些！

测试代码如下：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoobcom)</title>

</head>

<body>

<p>点击按钮返回符合大于输入框中指定数字的数组元素。</p>

<button onclick="myFunction()">find方法点我</button>

<button onclick="Fun()">遍历方法点我</button>

<button onclick="FunIndex()">直接找的方法</button>

<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>

//测试结果很现实，遍历比find要快太多

var ages = [];

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

agespush(i);

}

function checkAdult(age) {

return age == documentgetElementById("ageToCheck")value;

}

function myFunction() {

var start = new Date()getTime();

documentgetElementById("demo")innerHTML = agesfind(checkAdult);

consolelog("find查找耗时：" +(new Date()getTime()-start))

}

function Fun() {

var start = new Date()getTime();

var value = documentgetElementById("ageToCheck")value;

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

if(i==value){

documentgetElementById("demo")innerHTML =i;

consolelog("直接遍历耗时：" +(new Date()getTime()-start));

return;

}

function FunIndex(){

var start = new Date()getTime();

documentgetElementById("demo")innerHTML =ages[documentgetElementById("ageToCheck")value]

consolelog("数组索引查找耗时："+(new Date()getTime()-start));

}

</script>

</body>

</html>

测试结果如下：

为什么可以通过id直接访问对象，是因为所有的元素ID都相当于一个保存对象的全局变量。

通过id直接访问对象还存在兼容问题。

建议用documentgetElementById标准的形式获取对象。

如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象。

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

但是如果网页有两个相同ID的元素，就有点差异了：

<html>

<head>

function getInput() {

var mydiv = documentgetElementById("div1");

alert(mydivlength);//mydiv是DispHTMLElement

alert(div1length);//div1是DispHTMLElementCollection

}

</script>

</head>

<body>

</body>

</html>

以上就是关于js 如何获取对象名称全部的内容，包括:js 如何获取对象名称、JS中几种获取对象宽度和高度的区别、js 是否能根据对象的id直接从对象数组中获取该对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9564490.html

js 如何获取对象名称

发表评论

评论列表（0条）