運行JavaScript來修改CSS
[英]Running javascript to amend css
問題描述
我有以下代碼在jsfiddle環境下工作正常。 但是我不能讓它在它之外運行。 我對javascript比較陌生，所以不確定。 我需要將javascript聲明為函數並使其在頁面加載時運行嗎？ CSS和JS文件理想情況下將是外部文件，只要它們在我的html頭中被引用后便有所區別。
<html>
<head>
<style>
.container {
width: 100%;
height: 150px;
background : #bbb;
}
.inner {
float:left;
height:100%;
margin-left:20px;
}
</style>
<script>
var containerW = $('.container').width();
var innerCount = $('.container .inner').length;
var containerM = parseInt($('.container .inner').css("margin-left"));
$('.inner').css({
width: (containerW / innerCount) - containerM
})
</script>
</head>
<body>
<div class='container'>
<div class='inner' style='background : #FF0000;'></div>
<div class='inner' style='background : #00FF00;'></div>
<div class='inner' style='background : #FF0000;'></div>
<div class='inner' style='background : #00FF00;'></div>
</div>
</body>
</html>
演示
（我的代碼與小提琴略有不同，但原理是相同的，我無法使其正常工作。
謝謝
2 個解決方案
解決方案1
3 2014-08-08 09:52:04
您需要將jQuery封裝在ready文檔中 ：
$( document ).ready(function() {
var containerW = $('.container').width();
var innerCount = $('.container .inner').length;
var containerM = parseInt($('.container .inner').css("margin-left"));
$('.inner').css({
width: (containerW / innerCount) - containerM
})
});
在文檔“就緒”之前，無法安全地操縱頁面。 jQuery為您檢測到這種就緒狀態。 $（document）.ready（）內包含的代碼僅在頁面Document Object Model（DOM）准備好執行JavaScript代碼后才能運行。
您還可以使用窗口onload函數，請參見此處以獲取更多信息
就緒事件在HTML文檔已加載之后發生，而onload事件在稍后又加載了所有內容（例如圖像）時發生。
解決方案2
0 2014-08-08 10:19:04
您可以始終使用jsfiddle.com的“顯示”功能來查看代碼，例如：
右鍵單擊以查看jsfiddle生成的代碼，然后查看源代碼，在您的情況下，如下所示：
查看源代碼： http : //jsfiddle.net/yaLMk/4/show/
$(window).load(function(){
var containerW = $('.container').width();
var innerCount = $('.container .inner').length;
$('.inner').css({
width: containerW / innerCount
})
});
JavaScript：修改句子
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.