设定宽度 <div> 用Javascript
[英]Setting Width of <div> with Javascript
问题描述
I have a <table> which is dynamically created so the width is unknown. 
我有一个动态创建的<table> ，因此宽度未知。 I'm trying to add horizontal scroll bars to the top and bottom of it. 我正在尝试在其顶部和底部添加水平滚动条。 My current code... 我当前的代码...
<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>
In the last few lines, I've tried two different methods to set the width of the containing <div> to be mytext . 在最后几行中，我尝试了两种不同的方法来将包含<div>的宽度设置为mytext 。
Any ideas why either method isn't working? 任何想法为什么这两种方法都不起作用？ BTW, I'm not trying both methods at the same time the way it's shown here. 顺便说一句，我没有在这里显示的方式同时尝试这两种方法。
3 个解决方案
解决方案1
1 2015-10-24 18:59:22
The problem could be this. 问题可能是这样。
The script you have written to find mytext is being executed after the table is created. 创建表之后，将执行为查找mytext而编写的脚本。 But by the time the div is created value of mytext is not known. 但是到创建div时，mytext的值尚不清楚。 So I would recommend doing this. 因此，我建议您这样做。
<!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>
The above code changes the width of the div after finding the value of mytext. 上面的代码在找到mytext的值后更改了div的宽度。
解决方案2
1 2015-10-24 19:00:49
To find the width of an element you need to use window.getComputedStyle followed by getPropertyValue on that returned value. 要查找元素的宽度，您需要在返回的值上使用window.getComputedStyle然后使用getPropertyValue 。 What you are doing now only gives you the CSS value which is not set. 您现在所做的只是为您提供未设置的CSS值。
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
解决方案3
0 2015-10-24 19:50:36
I ended up using parts of both of the suggested answers for this question. 最后，我针对该问题使用了部分建议的答案。 After a lot of fiddling, I ended up with this for the final Javascript... 经过大量的摆弄，我最终将其作为最终的Javascript ...
var elem = document.getElementById("table_width");
var mytext = window.getComputedStyle(elem,null).getPropertyValue("width");
$('#div1').css({'width':mytext});
$('#div1').css({'overflow': 'scroll'});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.