樣式代碼不工作

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
     </title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" type="text/css" href="css/custom.css" /> 
    </head> 
    <body> 
     <button id="myButton">My Button</button><br /><br /> 
     <span id="myPara"> My paragraph</span>  
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> 
    <script type="text/javascript" src="js/custom.js" ></script> 
    </body> 
</html>

下面

是custom.css樣式代碼不工作

#myPara{ 
    border: 1px solid black; 
    color: black; 
    padding: 5px; 
}

下面的代碼是在custom.js

$('#myButton','#myPara').on('click',function(){ 
    $(this).css('border-color','white').css('background','black').css('color','white'); 
});

我想申請給定的CSS如圖jQuery代碼的代碼。

它也沒有在控制檯中給出任何錯誤，這使我很難找到錯誤。

在我的瀏覽器中，點擊上沒有顯示CSS效果。

我是jQuery的初學者。

來源

2016-11-10 R K

$('#myButton','#myPara').on('click',function(){

在這一行中，第一個參數是CSS選擇器，第二個參數用於上下文。你可能需要這個：

$('#myButton,#myPara').on('click',function(){

你可以找到更多關於how the $() function works here。

來源

2016-11-10 18:48:13 Ouroborus

您正在將context設置爲字符串，"#myPara"在jQuery()調用。使用

$('#myButton').on('click',function() { 
    $("#myPara") 
    .css({borderColor:'white', background:'black', color:'white'}); 
});

來源

2016-11-10 18:48:19 guest271314

逗號應該像

$('#myButton, #myPara').on('click',function(){ 
$(this).css('border-color','white').css('background','black').css('color','white'); 
});

來源

2016-11-10 18:50:14 jafarbtech

你在語法問題上是正確的，但是你的解決方案並不能真正解決問題。 –

Youv'e選擇內部編碼它不正確......

$('#myButton').on('click',function(){ 
    $('#myPara').css({ 
     borderColor: 'white', 
     backgroundColor: 'black', 
     color: 'white'}); 
});

在jQuery的正確的格式結合您的CSS屬性，並檢查選擇。在你的jQuery this指的是按鈕和段落。

$('#myButton').on('click',function(){ 
 
     $('#myPara').css({ 
 
      borderColor: 'white', 
 
      backgroundColor: 'black', 
 
      color: 'white'}); 
 
    });

#myPara{ 
 
    border: 1px solid black; 
 
    color: black; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton">My Button</button><br /><br /> 
 
     <span id="myPara"> My paragraph</span>

如果您想在要麼按鈕或被點擊的段落，您需要更改jQuery選擇發生變化....注意引號和逗號在選擇器中。這將改變所點擊的內容，而不是每次都改變段落內容。

$('#myButton, #myPara').on('click', function(){ 
 
     $(this).css({ 
 
      borderColor: 'white', 
 
      backgroundColor: 'black', 
 
      color: 'white'}); 
 
    });

#myPara{ 
 
    border: 1px solid black; 
 
    color: black; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="myButton">My Button</button><br /><br /> 
 
     <span id="myPara"> My paragraph</span>

來源

2016-11-10 18:50:24 Scott

它看起來像你想「如果單擊該按鈕，然後#myPara改變顏色」這可以用下面的代碼來完成：

jQuery('#myButton').click(function(){ 
     jQuery('#myPara').addClass('active'); 
    }); 

    .active { 
     border-color: white; 
     background: black; 
     color: white; 
    }

添加類似乎就像一個更有效的方式去做這件事。這樣，添加/刪除/編輯樣式變得更加容易。

來源

2016-11-10 18:56:04

樣式代碼不工作

回答

相關問題