我有以下代码可以在 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>
DEMO
(我的代码与 fiddle 略有不同，但原理是一样的，我无法让它工作。
谢谢
最佳答案
您需要将 jQuery 封装在 document 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
})
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
您还可以使用窗口加载功能，参见here for more info
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
来源:this answer , 类(class) Guffa
关于javascript - 运行javascript修改css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25200643/