如何动态更改div jquery的宽度

时间:2013-11-27 06:07:15

标签: jquery html css

<div class="video_wrpr" style="width: 1920px; left: -301px;">
            <div class="video1" style="width: 296.008px;">

这是我的HTML代码。我想计算视频1的宽度,它在我的情况8中动态变化并乘以一些数字,并改变video_wrpr的宽度。

element.style {
width: 296.008px;
}
.video1 {
position: relative;
float: left;
width: 235px;
margin-left: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
height: 174px;
}

这是div的样式,然后元素样式的宽度是在调整屏幕大小时动态改变宽度。而我试图使用width()获得该div的宽度。它给我的结果是235px而不是296px。

然后我使用$ window.resize来获得该div的动态宽度

jQuery(function($){

     $(window).resize(function(e) {
            $('.video1').each(function() {
                slwidth = $(this).width();
             });
     });
    var sliderLength=parseInt(jQuery('.video_wrpr .video1').length);
    $('.video_wrpr').width((sliderLength*slwidth));

如果我用这个我想用 slwidth 变量作为全局变量,我不知道如何实现。

我想知道这是唯一的方式还是其他任何方式存在?

1 个答案:

答案 0 :(得分:0)

只需在所有功能之外声明slwidth

var slwidth = 0;
jQuery(function($){

 $(window).resize(function(e) {
        $('.video1').each(function() {
            slwidth = $(this).width();
         });
 });
var sliderLength=parseInt(jQuery('.video_wrpr .video1').length);
$('.video_wrpr').width((sliderLength*slwidth));