設定寬度 <div> 用Javascript
[英]Setting Width of <div> with Javascript
問題描述
我有一個動態創建的<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 。
任何想法為什么這兩種方法都不起作用？ 順便說一句，我沒有在這里顯示的方式同時嘗試這兩種方法。
3 個解決方案
解決方案1
1 2015-10-24 18:59:22
問題可能是這樣。
創建表之后，將執行為查找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的寬度。
解決方案2
1 2015-10-24 19:00:49
要查找元素的寬度，您需要在返回的值上使用window.getComputedStyle然后使用getPropertyValue 。 您現在所做的只是為您提供未設置的CSS值。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
解決方案3
0 2015-10-24 19:50:36
最后，我針對該問題使用了部分建議的答案。 經過大量的擺弄，我最終將其作為最終的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 的寬度和高度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.