您的位置：首页 > Web前端 > CSS

CSS中关于:对象.OffsetWidth和对象.Style.width的区别

2016-12-05 13:14 316 查看

1.offsetWidth属性可以返回对象的padding+border+width属性值之和

style.width返回值就是定义的width属性值

2.offsetWidth属性仅是可读属性，而style.width是可读写的

3.offsetWidth属性返回值是整数，而style.width的返回值是字符串

4.style.width仅能返回以style方式定义的内部样式表的width属性值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exercise</title>
<style media="screen">
* {margin: 0px;padding: 0px;}
#div1{
width: 712px;
height: 108px;
background-color: pink;
margin: 200px auto;
position: relative;
overflow: hidden;
}
#div1 ul {
position: absolute;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;}
a{
position:relative;
top:150px;
left: 600px;
}
a:HOVER{
font-size: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var speed = 2;
var oDiv = document.getElementById('div1');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function move() {
if(oUl.offsetLeft < -(oUl.offsetWidth / 2))
{
oUl.style.left = '0';
}
if(oUl.offsetLeft > 0)
{
oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
};
var timer = setInterval(move, 20);
oDiv.onmouseover = function (){
clearInterval(timer);
};
oDiv.onmouseout = function (){
timer = setInterval(move, 20);
};
document.getElementsByTagName('a')[0].onclick = function (){
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function (){
speed = 2;
};
};
</script>
</head>
<body>
<a href="javasrcipt:;">left</a>
<a href="javasrcipt:;">right</a>
<div id="div1">
<ul>
<li> <img src="./images/1.jpg"></li>
<li> <img src="./images/2.jpg"></li>
<li> <img src="./images/3.jpg"></li>
<li> <img src="./images/4.jpg"></li>
</ul>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航