javascript - 关于获取元素宽度问题
本文介绍了javascript - 关于获取元素宽度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style>
.slide {
width:400px;
position:relative;
overflow:hidden;
height:266px;
}
.slide ul {
position:absolute;
left:0;
top:0;
list-style: none;
margin:0;
padding:0;
height:266px;
}
.slide li {
display:inline-block;
float:left;
}
.prev,.next {
position:absolute;
top:50%;
}
.prev{
left:10px;
}
.next {
right:0;
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li>
<img src="images/01.jpg" />
</li>
<li>
<img src="images/01.jpg" />
</li>
<li>
<img src="images/01.jpg" />
</li>
<li>
<img src="images/01.jpg" />
</li>
</ul>
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<script type="text/javascript">
var slide = function (obj){
var oSlide = obj;
var oSlideUl = oSlide.find("ul");
var oSlideLi = oSlide.find("li");
var w = oSlideLi.width();
oSlideUl.css("width",oSlideLi.length*oSlideLi.width());
var i = 0;
//console.log(oSlideLi.length);
$(".next").on("click",function(){
i++;
if(i>oSlideLi.length-1){
i=0;
oSlideUl.animate({
"margin-left":0
},600)
}else{
oSlideUl.animate({
"margin-left":-(i*oSlideLi.width())
},600)
}
console.log(i);
});
$(".prev").on("click",function(){
i--;
console.log(i);
if(i<0){
i=3;
oSlideUl.animate({
"margin-left":-(i*oSlideLi.width())
},600)
}
oSlideUl.animate({
"margin-left":-(i*oSlideLi.width())
},600)
console.log(i);
});
}
slide($(".slide"));
</script>
</body>
</html>我想问下 为什么有的时候刷新页面获取到的li的宽度为0？
解决方案
li的宽度是考img撑开的，刷新图片没加载完的话，li的宽度就是0
这篇关于javascript - 关于获取元素宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
