使用jquery更改css屬性

-4

請檢查下面的代碼。我想在點擊'開關'按鈕後改變一個css屬性。我在這裏做什麼錯了？如果可能，請幫助我以任何其他方式做到這一點。感謝所有使用jquery更改css屬性

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 

    <script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</head> 
<body> 


<button id="myButton">switch</button> 

<p class="foo">Some text</p> 




<script type="text/javascript"> 

$("#myButton").click(function() { 
    $(".foo").attr("background", "red"); 
}); 

</script> 


<style> 
.foo { 
    background: gray; 
} 

</style> 

</body> 
</html>

來源

2017-09-09 john pk

你需要使用的.attr

$("#myButton").click(function() { 
    $(".foo").css("background", "red"); 
});

來源

2017-09-09 10:15:35 PayteR

.css方法instad當改變CSS屬性，使用$.css()方法：

$("#myButton").click(function() { 
 
    $(".foo").css("background", "red"); 
 
    // Or, for multiple properties: 
 
    $(this).css({ 
 
    "background": "blue", 
 
    "color": "white", 
 
    "border": "2px solid yellow", 
 
    "font-weight": "bold" 
 
    }); 
 
});

.foo { 
 
    background: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="myButton">switch</button> 
 
<p class="foo">Some text</p>

來源

2017-09-09 10:15:42

呦u必須用於此css()方法：

$("#myButton").click(function() { 
    $(".foo").css("background", "red"); 
});

參考this w3schools鏈接瞭解更多信息。

以下是您的工作文件樣本。

$("#myButton").click(function() { 
 
    $(".foo").css("background", "red"); 
 
});

.foo { 
 
    background: gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>test</title> 
 

 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</head> 
 

 
<body> 
 

 

 
    <button id="myButton">switch</button> 
 

 
    <p class="foo">Some text</p> 
 

 
</body> 
 

 
</html>

來源

2017-09-09 10:15:47 weBBer

請jQuery的改變attr到css。

$("#myButton").click(function() { 
 
    $(".foo").css("background", "red"); 
 
});

.foo { 
 
    background: gray; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
    <script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</head> 
 
<body> 
 
<button id="myButton">switch</button> 
 
<p class="foo">Some text</p> 
 

 

 

 
</body> 
 
</html>

來源

2017-09-09 10:15:55

背景不標記屬性，它的CSS屬性。這意味着你應該試試這個：

$("#myButton").click(function() { 
    $(".foo").css("background", "red"); 
});

來源

2017-09-09 10:16:28 voloshin

使用jquery更改css屬性

回答

相關問題