CSS File properties are not getting applied in The HTML code
Question
The CSS FIle properties are not getting applied. The text color should be red and the background should be light green. But nothing is getting applied. The text color is just black and the background is white. I want to change the colors of the things that are inside the fade class. The HTML page looks like this My HTML Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" href="cs.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css" />-->
<!-- <link-->
<!-- rel="stylesheet"-->
<!-- href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"-->
<!-- />-->
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>
<div>
<form th:action="@{/}">
Filter: <input type="text" name="keyword" id="keyword" size="50" th:value="${keyword}" required />
<input type="submit" value="Search" />
<input type="button" value="Clear" id="btnClear" onclick="clearSearch()" />
</form>
</div>
<div class="mimi">
<h2 >Search Recipe By Ingredients</h2>
<!-- <tr>-->
<div class="col-sm-5" align = "center">
<div class="panel-body" align = "center" >
<table>
<thead class="thead-dark">
<tr>
<th>Recipe ID</th>
<th>Title</th>
<th>Source</th>
<th>Cuisine</th>
<th>Ingredients</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr class="fade" th:each="recipe: ${listrecipe }">
<td th:text="${recipe.Recipe_Id}">Recipe ID</td>
<td th:text="${recipe.Title}">Title</td>
<td th:text="${recipe.Source}">Source</td>
<td th:text="${recipe.Cuisine}">Cuisine</td>
<td th:text="${recipe.Ingredients}">Ingredients</td>
<td th:text="${recipe.Links}">Links</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- </tr>-->
</div>
</body>
<script type="text/javascript">
function clearSearch() {
window.location = "[[@{/}]]";
}
</script>
</html>
CSS:
.fade {
margin: 50px;
padding: 50px;
background-color: lightgreen;
opacity: 1;
color: red !important;
}
1 answers
solution1
0 2021-03-30 10:31:16
Check your dev tools, is the class being applied to the element? Are you seeing any other css applied in styles to the element?
Try moving your script to the bottom of the page rather than the top outside of the body.
Ps. I ran your code on codepen and it's working fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.