使用JQuery來改變CSS頂部

我想把文本放在圖像上，所以我用CSS來做到這一點。但是因爲我使用Bootstap來創建它，並且我覺得在CSS文件中放置絕對位置時，我在調整大小（文本不居中）時遇到了問題，所以我製作了一個JQuery腳本來處理寬度更改，但它不起作用使用JQuery來改變CSS頂部

WidthChangeScript.js

if($(window).width() > 500){ 
$("#FactionsWidthtoPos").css("top","255px"); 
}

的index.html

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>GrassCraft</title> 
    <!----Bootstrap----> 
    <link href="CSS/bootstrap.min.css" rel="stylesheet"> 
    <link href="CSS/textoverimage.css" rel="stylesheet"> 

</head> 

<body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 


      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Brand</a> 
      </div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Forums</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Shop<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Factions Grass</a></li> 
          <li><a id="FctQu" href="#" >Factions Quartz</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="#">How it works</a></li> 
         </ul> 
        </li> 
       </ul> 
       <form class="navbar-form navbar-left" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"></a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 

     </div> 
    </nav> 
<!---Site body---> 
    <div id="imgTop" class="imageBehindText"> 
     <img src="http://placehold.it/1920x800" class="img-responsive" width="1980" height="800"> 
     <h2 id="FactionsWidthtoPos" class="textOverImage" >Factions</h2> 
    </div> 
    <div class="placeHolderImage"> 
     <img src="http://placehold.it/1920x100" class="img-responsive" width="1980" height="800">> 
    </div> 
    <div class="container"> 
     <div class="jumbotron"> 
      <h1 id="abtUs" > GrassCraft</h1> 
      <p id="abtUsTxt" >A new Factions server made by 2 young enthusiasts. Any financial support would mean alot</p> 
     </div> 
    </div> 






     <!----Botstrap required JQuery----> 
    <script src="jquery.min.js"></script> 

    <script src="JavaScript/bootstrap.min.js"></script> 
    <script src="JavaScript/WidthChangeScript.js"></script> 
</body>

textoverimage.css

.imageBehindText { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
    } 

.textOverImage { 
    position: absolute; 
    top: 100px; 
    text-align: center; 
    width: 100%; 
    color: #f0f8ff; 
    text-decoration: underline; 
    } 
    .placeHolderImage { 
    opacity: 0; 

    }

這是幾乎所有本網站的代碼還，如果你知道什麼辦法可以優化代碼，請說

來源

2016-05-14 strajabot

更好地問自動更新您的.textOverImage類在http://codereview.stackexchange.com – StepUp

你可以把你的代碼中調整的事件處理程序這樣

$(document).ready(function(){ 
    function resize(){ 
     if($(window).width() > 500){ 
     if(!$("#FactionsWidthtoPos").hasClass("something")) 
      $("#FactionsWidthtoPos").addClass("something"); 
     }else{ 
     if($("#FactionsWidthtoPos").hasClass("something")) 
      $("#FactionsWidthtoPos").removeClass("something"); 
    } 
    } 
    resize(); 
    $(window).resize(function(){ 
    resize(); 
    }); 
});

的jQuery的CSS文件將包含類似

一個新的類

.something{ 
    top : 255px; 
}

您還可以使用媒體查詢窗口大小變化這樣

@media only screen and (min-width: 500px) { 
.textOverImage { 
    top : 255px; 
} 
}

這個媒體查詢更新你的CSS當你的窗口大小分500像素

來源

2016-05-14 20:02:51

使用JQuery來改變CSS頂部

回答

相關問題