引入js后原有css失效
我给一个页面添加了随即改变背景色的js，但是在这之后原来的css失效了，这是怎么回事？//这是更改评论盒子背景色的脚本
document.addEventListener('DOMContentLoaded', function() {
let box = document.querySelectorAll(".comment");
for (let i = 0; i < box.length; i++) {
setRandomBackgroundColor(box);
}
});
//随机背景色函数
function setRandomBackgroundColor(element) {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters;
}
element.style.backgroundColor = color;
}
<%@ page import="java.util.List" %>
<%@ page import="edu.zjku.bean.Comment" %>
<%@ page import="edu.zjku.bean.Blog" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>博客详情</title>
<link rel="stylesheet" href="style/public.css"/>
<script src="script/randomColor.js"/>
<style>
.comment {
display: flex;
align-items: center;
margin: 20px auto;
padding-left: 20px;
width: 100%;
height: 50px;
color: #fff;
line-height: 50px;
text-align: center;
/*background: teal;*/
clip-path: polygon(0 0, 88% 0, 88% 35%, 95% 50%, 88% 65%, 88% 100%, 0 100%);
border: 1px solid teal;
}
</style>
</head>
<body>
<jsp:include page="header.jsp"/>
<main>
<%-- 从会话域获取博客及其评论--%>
<%
Blog blog = (Blog) session.getAttribute("blogDetail");
List<Comment> commentList = (List<Comment>) session.getAttribute("commentList");%>
<div class="blog">
<h2><%=blog.getTitle()%>
</h2>
<p><%=blog.getText()%>
</p>
<p><%=blog.getUser()%>
</p>
<p><%=blog.getTime()%>
</p>
</div>
<%
for (Comment comment : commentList) {
%>
<div class="comment">
<p><%=comment.getContent()%>
</p>
<p><%=comment.getUsername()%>
</p>
<p><%=comment.getTime()%>
</p>
</div>
<%}%>
</main>
<jsp:include page="aside.jsp"/>
<jsp:include page="footer.jsp"/>
</body>
</html>
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。为了修复这个问题，您可以将setRandomBackgroundColor函数修改为以下代码：
function setRandomBackgroundColor(element) {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters;
}
element.style.backgroundColor = color;
}
这样修改后，随机颜色的功能应该能正常工作，并且不会影响原本的CSS样式。
另外，您还可以通过修改随机颜色生成算法，使得生成的颜色更加漂亮、和谐。例如，您可以使用HSL（色相、饱和度、亮度）模型来生成随机颜色，或者使用预定义的一些颜色集合，这样生成的颜色更加美观。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-26 18:03
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。 ...
HSL模型是什么，又该怎么使用呢？ ZhihanXing 发表于 2024-04-26 18:05
HSL模型是什么，又该怎么使用呢？
HSL代表了色相（Hue）、饱和度（Saturation）和亮度（Lightness），它是一种基于颜色圆柱坐标系统的颜色模型。在HSL模型中，色相表示颜色在色轮上的位置，饱和度表示颜色的纯度或者灰度的程度，亮度则表示颜色的明暗程度。
如果你想要使用HSL模型来生成随机颜色，可以按照以下步骤进行：
1. 首先，生成一个随机的色相值，范围是0到360之间。可以使用`Math.random()`方法生成一个0到1之间的随机数，并将其乘以360，然后取整数部分。
2. 接下来，为了使生成的颜色更加丰富多样，可以固定饱和度和亮度的值，或者根据需求进行调整。通常，饱和度可以设置为一个固定值，如80%，亮度可以设置为50%。
3. 最后，将生成的色相、饱和度和亮度转换为CSS的颜色表示形式，应用到元素的背景色属性上。
下面是一个使用HSL模型生成随机颜色的示例代码：
function setRandomBackgroundColor(element) {
let hue = Math.floor(Math.random() * 361);
let saturation = '80%';
let lightness = '50%';
let color = 'hsl(' + hue + ', ' + saturation + ', ' + lightness + ')';
element.style.backgroundColor = color;
}
通过使用HSL模型生成的随机颜色，您可以得到更加丰富多样的颜色，并且适用于不同场景的设计和显示要求。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-26 18:03
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。 ...
这样修改并没有解决我的问题，我使用开发者工具查看后并没有看到样式表中设置的样式 ZhihanXing 发表于 2024-04-26 18:11
这样修改并没有解决我的问题，我使用开发者工具查看后 ...
如果在引入了JavaScript后发现原有的CSS样式没有生效，可能是因为JavaScript代码中修改了元素的内联样式（inline style），而内联样式的优先级高于外部样式表。这就导致了原有的CSS样式被覆盖或失效。
为了解决这个问题，您可以尝试以下几种方法：
1. 在JavaScript代码中只修改需要的样式属性，而不是直接设置`element.style`对象。这样可以避免覆盖原有的CSS样式。例如，针对背景色的修改可以改为 `element.style.backgroundColor = color;`，而不修改其他属性。
2. 将CSS样式定义为类，并在JavaScript中通过添加或移除类来改变样式。这种方式可以更好地与外部样式表配合使用。例如，将背景色定义为一个CSS类，例如`.random-background`，然后在JavaScript中使用`element.classList.add('random-background')`来应用这个类，使用`element.classList.remove('random-background')`来移除这个类。
3. 如果您需要在JavaScript代码中直接修改内联样式，并且又想保留原有的CSS样式，可以考虑使用`element.style.setProperty()`方法来修改样式。例如，`element.style.setProperty('backgroundColor', color)`。
希望这些建议对您有所帮助，并解决了您遇到的问题。如有任何疑问，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]