运行javascript修改css_Javascript_Jquery_Html_Css

运行javascript修改css

javascript jquery html css

运行javascript修改css,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下代码，可以在JSFIDLE环境中正常工作。然而，我无法让它在它之外运行。我对javascript比较陌生，所以不确定。我是否需要将javascript声明为函数并在页面加载时运行？CSS和JS文件在理想情况下是外部文件，如果在我的html的开头部分引用了它们之后会有任何不同的话 <html> <head> <style> .container { width: 100%; height: 150

我有以下代码，可以在JSFIDLE环境中正常工作。然而，我无法让它在它之外运行。我对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>

我的代码与小提琴略有不同，但原理是一样的，我无法让它工作

谢谢

您需要将jQuery封装在：

在文档准备就绪之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包括在内 $document.ready将只运行一次页面文档对象模型DOM已准备好让JavaScript代码执行

也可以使用窗口加载功能，请参阅

ready事件在加载HTML文档后发生，而当所有内容（如图像）都已加载时，onload事件会在稍后发生已加载

来源：，Coursey of

您可以随时使用jsfiddle.com的“show”功能查看您的代码，例如：

要查看由JSFIDLE生成的代码，只需右键单击并查看源代码，在您的示例中如下所示：

查看来源：

谢谢如果我把它放在我的外部JS文件或页面的头部，它应该以当前格式运行吗？或者我需要叫它什么的？嗯，它似乎不起作用。我刚刚用修改后的版本替换了我原来发布的代码中的脚本，但没有任何运气。谢谢，这是一个有用的提示。然而奇怪的是，即使我复制并粘贴了来自JSFIDLE的整个源代码，mine在同一个浏览器中的呈现方式也与它在JSFIDLE上的呈现方式不同。@Sean你是对的，show的功能是用你编写的jsscript查看html代码。如果您只是复制html并将其粘贴到一个文件中，并将其作为html运行，它将从何处获取其依赖项？您可以做的一件事是，使用“ctrl+s”保存整个页面，您的html所依赖的所有文件将自动下载，现在运行该html。您的html将运行良好。

$( 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  
  })
});

$(window).load(function(){
var containerW = $('.container').width();
var innerCount = $('.container .inner').length;

$('.inner').css({
    width: containerW / innerCount
})
});