使用內聯CSS動態設置div高度並調用JavaScript函數

爲了我的目的，我需要儘可能快地設置div高度。使用內聯CSS動態設置div高度並調用JavaScript函數

使用document.ready()事件速度不夠快，所以我想設置div的內聯CSS樣式。

如何實現這樣的事情？

<div id="map-container" style="height:javascript(getwindowheight)px;"> 
    <div id="map"> 

    </div> 
</div> 

function getwindowsheight() { 
    return window.height; 
}

有什麼建議嗎？

來源

2012-11-13 sergserg

爲什麼不使用高度：100％？請記住＃map-container的父容器也需要一個高度才能工作。 –

樣式屬於CSS。你有使用JS的很好的理由嗎？ – zzzzBov

@計算機藝術：它一直都是龜嗎？：P - 地圖容器是最頂級的div，這就是爲什麼我想給它一個特定的像素高度。 – sergserg

既然您希望它是動態的，您將需要注意以下事件：

窗口調整
窗口準備

設置你的HTML第一：

<div id="map-container"></div>

然後你的JavaScript，設置內部功能來檢測那些：

var applyMapContainerHeight = function() { 
    var height = $(window).height(); 
    $("#map-container").height(height); 
}; 

document.ready(function() { 
    applyMapContainerHeight(); 
}); 

$(window).resize(function() { 
    applyMapContainerHeight(); 
});

來源

2012-11-13 19:20:35 matsko

前提是jQuery是腳本文件都包含在HTML的開始，放置一些腳本的div聲明之後：

<div id="map-container"> 
    <div id="map"> 

    </div> 
</div> 
<script type="text/javascript"> 
    $("#map-container").height(getwindowsheight()); 
    function getwindowsheight() { 
     return window.height; 
    } 
</script>

來源

2012-11-13 19:15:04

不會返回$沒有定義？ Jquery可能尚未加載。 –

@ComputerArts通常，外部js鏈接是在HTML的開頭定義的。他們應該。我只是更新了答案，以確保是這種情況。 –

不一定，我已經看到越來越多的JavaScript文件被包含在主體的底部，這樣頁面（文本）呈現得更快（不必等待所有js庫加載）。 –

然後不使用的document.ready

只執行您的js在div後

<div id="map-container"> 
    <div id="map"> 

    </div> 
</div> 
<script type="text/javascript"> 
$('#map-container').css({ height: 'your height'}); 
</script>

來源

2012-11-13 19:15:11

如果jquery未加載/不在緩存中，則無法運行。 –

它會工作，如果您在頭部添加了jQuery鏈接。 –

<div id="map-container"> 
    <div id="map"> 
    </div> 
</div> 

<script type="text/javascript"> 
document.getElementById("map-container").style.height= $(window).height() + "px"; 
</script>

來源

2012-11-13 19:27:10

使用內聯CSS動態設置div高度並調用JavaScript函數

回答

相關問題