Question

虽然这个例子在这里运行正常，但是当我把它分解到css在外部样式表中的位置时，它找不到css（请在代码片段中查看HTML标签之后的注释示例，这里的代码片段工作正常b / c css evaulates到内部样式表）。我正在使用window.onload事件，它应该等待DOM，JavaScript和EXTERNAL CSS加载。为什么它找不到外部css是我的问题。虽然Greensock体验可以帮助您提高这个问题的舒适度，但我很确定这是我的greensock插件无法在window.onload触发时找到外部css资源。

$(window).load(function() {
   alert("window is loaded");   
alert("CSSRulePlugin" + CSSRulePlugin);   
				var rule = CSSRulePlugin.getRule(".navbar-default .navbar-nav > li > a:before"); //get the rule
				alert("rule = " + rule);
				
		TweenMax.set(rule, {cssRule:{scaleX:0}});
	});

.navbar-default .navbar-nav > li > a:before {
    background-color: #000000;
    content: "";
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSRulePlugin.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap.min.css" rel="stylesheet"/>
	<link href="main.css" rel="stylesheet"/>
	 <script src="jquery-2.1.4.min.js"></script>
	 <script src="bootstrap.min.js"></script>
	<script src="TweenMax.min.js"></script>
	<script src="CSSRulePlugin.min.js"></script>
	
  </head>
<body>
	        <nav class="navbar navbar-default" role="navigation">
    	  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
			  
				
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="navbar-collapse-1">
		      <div id="box">

		      <ul  id="menu" class="nav navbar-nav navbar-right">
			    <li><a href="#" class="link">Link</a></li>
				<li><a href="#" class="link">Link</a></li>
		        <li><a href="#" class="link">Link</a></li>
		        <li><a href="#" class="link">Link</a></li>
		        <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#" >Another action</a></li>
                    <li><a href="#" >Something else here</a></li>
                  </ul>
                </li>		        
		      </ul>
			  
			  </div>
		    </div>
		  </div>
		</nav>

		  
						  

  </body>


  <script> 
	
	
	
</script>

		
</html>
<!-- *** THIS FAILS AS AN EXTERNAL STYLE SHEET, THE CSS IS NOT AVAILABLE TO THE HTML ONLOAD , WHY???????????
/*INDEX.HTML*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet"/>
    <link href="bootstrap.min.css" rel="stylesheet"/>
 <script src="jquery-2.1.4.min.js"></script>
<script src="TweenMax.min.js"></script>
<script src="CSSRulePlugin.min.js"></script>
<script src="bootstrap.min.js"></script>
  </head>
<body>
       <nav class="navbar navbar-default" role="navigation">
     <div class="container">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
 
 
   </div>
 
   <div class="collapse navbar-collapse" id="navbar-collapse-1">
     <div id="box">
 
     <ul  id="menu" class="nav navbar-nav navbar-right">
   <li><a href="#" class="link">Link</a></li>
<li><a href="#" class="link">Link</a></li>
       <li><a href="#" class="link">Link</a></li>
       <li><a href="#" class="link">Link</a></li>
       <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#" >Another action</a></li>
                    <li><a href="#" >Something else here</a></li>
                  </ul>
                </li>        
     </ul>
 
 </div>
   </div>
 </div>
</nav>
 
 
 
 
  </body>
 
  <script> 
$(window).load(function() {
alert("window is loaded");
var rule = CSSRulePlugin.getRule(".navbar-default .navbar-nav > li > a:before"); //get the rule
TweenMax.set(rule, {cssRule:{scaleX:0}});
});
</script>
 
 
</html>
 
/*MAIN.CSS*/
 
.navbar-default .navbar-nav > li > a:before {
    background-color: #000000;
    content: "";
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}


-->

当$（window）.load触发时，外部样式表不可用于插件

0 个答案: