在javascript中遇到一些html的实际宽度问题

Question

我正在尝试使用 javascript 函数 width 来获取容器的宽度，并使用它来计算一些滚动文本应该开始滚动的位置（我希望它在黄色框内滚动）：

现在，javascript 代码如下：

alert(yellowBox.width());
alert(yellowBox.innerWidth());
alert(yellowBox.outerWidth());

全部显示，944，但我确定黄色框的宽度实际上是 500，但我不想使用该值，因为宽度可能会改变。

而且我不确定如何获得框的实际宽度。我试过使用yellowBox.offsetWidth() 和yellowBox.clientWidth，但它们不起作用，Web Developer, Web Console plugin for firefox 告诉我“yellowBox.offsetWidth 不是一个函数”，还有“yellowBox.clientWidth不是函数。

这是我的代码：

html:

<div class="container-fluid" style="padding: 5px 20px;">

  <div class="well" style="background-color: <?php echo $layout_setting[2][value]; ?>; font-size:large; font-weight:bold;">

    <div class="marquee" style="white-space: nowrap; width: 100%; color: <?php echo $layout_setting[7][value] ?>; overflow: hidden; ">

      <?php echo $rssContent; ?>

    </div>
  </div>

</div>

js插件代码：

(function( $ ) {
    $.fn.marquee = function(params) {
        params = $.extend( {direction : 'left',duration : '2000', delayStart : '0'}, params);
        var duration = parseInt(params.duration);
        var delay = parseInt(params.delayStart);

        var par = $(this);

        alert(par.width());
        alert(par.innerWidth());
        alert(par.outerWidth());

        par.wrapInner('<span></span>');

        /*I get the same result for width both before and after the line that says `par.wrapInner('<span></span>');*/
        alert(par.width());
        alert(par.innerWidth());
        alert(par.outerWidth());

        var parCh = par.children('span');
        var leftMargin = parCh.css('margin-left').replace('px', '');
        var rightMargin = par.innerWidth() - leftMargin - parCh.width();

        function dirRight() {
            parCh.css({'margin-left' : '' + leftMargin + 'px'});
            //I've determined that `500` is about the width of the yellow box, by changing the line above to:
            //`parCh.css({'margin-left' : '' + leftMargin + 500 + 'px'});`
            //and seeing where that is the about the value it needs to be to have the left side of the text start out scrolling into the right side of the box
            //instead of having the left side of the scrolling text starting at the left side of the yellow box
            parCh.animate({'margin-left' : '' + rightMargin + 'px'}, duration, 'linear', function() { dirRight(); });
        }

        function dirLeft() {
            parCh.css({'margin-left' : '' + rightMargin + 'px'});
            parCh.animate({'margin-left' : '' + leftMargin + 'px'}, duration, 'linear', function() { dirLeft(); });
        }

        if (params.direction == 'right') setTimeout(function(){ dirRight() }, delay);

        if (params.direction == 'left') {
            parCh.css({'margin-left' : '' + rightMargin + 'px'});
            setTimeout(function(){ dirLeft() }, delay);
        }

        $(window).resize(function() { rightMargin = par.innerWidth() - leftMargin - parCh.width(); });
    };
}( jQuery ));

以及我调用插件的函数：

function scrollMarquee() {
    setInterval("scrollMarquee()", 1000000);

$('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});

}

Answer 1

原因可能是您在错误的 div 或元素上使用了 width() innerWidth() 和 outerWidth()

<div id="div1">
 <div id="div2" style="height:100px;width:300px;background-color:lightblue;"></div>
</div>
<script>
$(document).ready(function(){
    alert("Width of outer div: " + $("#div1").width()+"="+   $("#div1").innerWidth()+"="+ $("#div1").outerWidth());
    alert("Width of inner div: " + $("#div2").width()+"="+   $("#div2").innerWidth()+"="+ $("#div2").outerWidth());
});
</script>

会给你不同的价值

Answer 2

尝试以下方法：

$(window).load(function(){
    $('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});
});

或

$(document).ready(function(){
    $('.marquee').marquee({'direction' : 'right', 'delayStart' : '0', 'duration' : '1000000'});
});