javaScript 里面 怎么知道Object 对象的长度

JavaScript018

javaScript 里面 怎么知道Object 对象的长度,第1张

解决办法:

var obj={

a:1,

b:2,

c:3

}

var objKeys=Object.keys(obj)

console.log(objKeys)

console.log(objKeys.length)

Object.keys()方法把对象的key存储成一个array。

基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

日常用途

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

在数据被提交到服务器之前验证数据。

检测访客的浏览器信息。

控制cookies,包括创建和修改等。

基于Node.js技术进行服务器端编程。

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>

<meta charset="UTF-8">

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

<style type="text/css">

#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 id="wrap">

<div id="content"></div>

</div>

</body>

<script type="text/javascript">

//获取content对象

var contentObj = document.getElementById("content")

console.log(contentObj.clientHeight)

console.log(contentObj.clientWidth)

</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>

<meta charset="UTF-8">

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

<style type="text/css">

#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 id="wrap">

<div id="content">

<div id="one"></div>

</div>

</div>

</body>

<script type="text/javascript">

//获取content对象

var contentObj = document.getElementById("content")

console.log(contentObj.clientHeight)

console.log(contentObj.clientWidth)

console.log(contentObj.clientTop)

console.log(contentObj.clientLeft)

</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>

<meta charset="UTF-8">

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

<style type="text/css">

#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 id="wrap">

<div id="content">

<div id="one"></div>

</div>

</div>

</body>

<script type="text/javascript">

//获取content对象

var contentObj = document.getElementById("content")

console.log(contentObj.offsetHeight)

console.log(contentObj.offsetWidth)

console.log(contentObj.offsetLeft)

console.log(contentObj.offsetTop)

</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 元素滚动的距离

方法如下:<input name="kk"></input><script language="javascript">// 这里用getElementsByTagName把所有的input对象取出来,这是你这个问题的关键性的地方,用ByTagName而不是ByName。var inputList = document.getElementsByTagName("input")// 循坏这个集合,包括了所有的input。for(i=0i<list.lengthi++){ // 这里弹出的就是'kk',当然也可以根据需要输出别的。比如:list[i].idlist[i].value等等。alert(list[i].name)// 这是修改这个值list[i].name = 'mm'// 这时弹出的就是'mm'了alert(list[i].name)}</script>本回答由电脑网络分类达人 朱冬梅推荐评论 1 0玄鸢 采纳率:84% 来自团队:百度贴吧达人团 擅长: 百度产品 百度贴吧 百度知道 电脑/网络其他回答我想楼主的意思是这样的吧,并不是要取'kk'的input中的value值。而是‘kk’本身这个name名称吧。根据你的问题补充:<input name="kk"></input><script language="javascript">// 这里用getElementsByTagName把所有的input对象取出来,这是你这个问题的关键性的地方,用ByTagName而不是ByName。var inputList = document.getElementsByTagName("input")// 循坏这个集合,包括了所有的input。for(i=0i<list.lengthi++){ // 这里弹出的就是'kk',当然也可以根据需要输出别的。比如:list[i].idlist[i].value等等。alert(list[i].name)// 这是修改这个值list[i].name = 'mm'// 这时弹出的就是'mm'了alert(list[i].name)}</script>希望我对你的问题理解对了,并能对你有帮助!