在javascript中遇到了一些html的实际宽度问题 [英] Having trouble the actual width of some html in javascript

问题描述

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

现在，JavaScript代码如下所示：

  alert（yellowBox.width（））; 
 alert（yellowBox.innerWidth（））; 
 alert（yellowBox.outerWidth（））; 
  

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

我不确定如何获得框的实际宽度。我试过使用 yellowBox.offsetWidth（）和 yellowBox.clientWidth ，但它们不起作用， Web Developer，Firefox的Web控制台插件告诉我yellowBox.offsetWidth不是函数，并且yellowBox.clientWidth不是函数。。

这里是我的代码：

html：

 < div class = container-fluidstyle =padding：5px 20px;> 
 
< div class =wellstyle =background-color：<？php echo $ layout_setting [2] [value ]。 ？取代;字体大小：大; font-weight：bold;> 
 
< div class =marqueestyle =white-space：nowrap;宽度：100％; color：<？php echo $ layout_setting [7] [value]？>;溢出：隐藏; > 
 
<？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。 （）; 
 $ b / *我得到相同的宽度结果前和后（par.wrapInner（'< span>< / span>'）; * / 
 alert（par.width（））; 
 alert（par.innerWidth（）） ; 
 alert（par.outerWidth（））; 
 
 var parCh = par.childr en（'span'）; 
 var leftMargin = parCh.css（'margin-left'）。replace（'px'，''）; 
 var rightMargin = par.innerWidth（） -  leftMargin  -  parCh.width（）; 
 
函数dirRight（）{
 parCh.css（{'margin-left'：''+ leftMargin +'px'}）; 
 //我确定`500`是黄色框的宽度，将上面的行改为：
 //`parCh.css（{'margin-left'：'' + leftMargin + 500 +'px'}）;`
 //并且看到它所需要的值是让文本的左侧开始滚动到框的右侧
 //而不是让滚动文本的左边从黄框左边开始
 parCh.animate（{'margin-left'：''+ rightMargin +'px'}，duration ，'linear'，function（）{dirRight（）;}）; 
 
 
函数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）; 
 
 $ b $（window）.resize（function（）{rightMargin = par.innerWidth（） -  leftMargin  -  parCh.width（）;}）; 
}; 
}（jQuery））; 
  

以及我称之为插件的函数：

 函数scrollMarquee（）{
 setInterval（scrollMarquee（），1000000）; 
 
'（'。marquee'）。marquee（{'direction'：'right'，'delayStart'：'0'，'duration'：'1000000'}）; 
 
 
  

解决方案

试试如下：

  $（window）.load（function（）{
 $（'。marquee'）。marquee （{'direction'：'right'，'delayStart'：'0'，'duration'：'1000000'}）; 
}）; 
  

或

  $（document）.ready（function（）{
 $（'。marquee'）。marquee（{'direction'：'right '，'delayStart'：'0'，'duration'：'1000000'}）; 
}）; 
  

I am trying to use the javascript function width to get the width of a container, and use it to calculate where some scrolling text should start scrolling (I want it to scroll inside of a yellow box):

Now, javascript code like this:

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

All show, 944, but I've determined the yellow box is actually a width of 500, but I don't want to use that value, because the width could change.

And I'm not sure how to get the actual width of the box. I've tried using yellowBox.offsetWidth(), and yellowBox.clientWidth, but they don't work, and the Web Developer, Web Console plugin for firefox tell me that "yellowBox.offsetWidth is not a function", and also "yellowBox.clientWidth is not a function.

Here is my code:

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 plugin code:

(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 ));

and the function where I call the plugin:

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

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

}

解决方案

Try the following:

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

OR

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

这篇关于在javascript中遇到了一些html的实际宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！