Question

我有一个动态创建的<table>，因此宽度未知。我正在尝试在其顶部和底部添加水平滚动条。我目前的代码......

<div class="wrapper1">
    <div class="div1" width="<script type=\"text/javascript\">document.write(mytext);</script>">
    </div>
</div>

<div class="wrapper2">
   <div class="div2">
      <table id="table_width">
         *table content goes here*
      </table>
   </div>
 </div>

<script type="text/javascript">
$(function(){
$(".wrapper1").scroll(function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
});
});

var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width = width + 'px'; //Method 2
</script>

在最后几行中，我尝试了两种不同的方法将包含<div>的宽度设置为mytext。

为什么这两种方法都不起作用的任何想法？顺便说一句，我不会像这里所示的那样同时尝试这两种方法。

Answer 1

问题可能是这个。

创建表后，您正在编写用于查找mytext的脚本。但是在创建div时，mytext的值是未知的。所以我建议这样做。

<!DOCTYPE html>


<div class="wrapper1">
   <div id="div1">
   </div>
</div>

<div class="wrapper2">
 <div class="div2">
   <table>
     *table content goes here*
   </table>
 </div>

 <script type="text/javascript">
   $(function(){
       $(".wrapper1").scroll(function(){
          $(".wrapper2")
      .scrollLeft($(".wrapper1").scrollLeft());
   });
$(".wrapper2").scroll(function(){
$(".wrapper1")
    .scrollLeft($(".wrapper2").scrollLeft());
 });
});

var mytext = document.getElementById("table_width").offsetWidth; //Method 1
var mytext = document.getElementById("table_width").style.width ; //Method 2

 document.getElementById('div1').width = mytext;
 </script>


</html>

上面的代码在找到mytext的值后会改变div的宽度。

Answer 2

要查找元素的宽度，您需要在返回的值上使用window.getComputedStyle后跟getPropertyValue。你现在正在做的只是给你未设置的CSS值。

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 3

我最终使用了这个问题的两个建议答案的部分内容。经过大量的摆弄，我最终得到了最终的Javascript ...

var elem = document.getElementById("table_width");
var mytext = window.getComputedStyle(elem,null).getPropertyValue("width");
$('#div1').css({'width':mytext});
$('#div1').css({'overflow': 'scroll'});

使用Javascript设置<div>的宽度

3 个答案: