引入js后原有css失效

ZhihanXing · 发表于 2024-4-26 18:03:30

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我给一个页面添加了随即改变背景色的js，但是在这之后原来的css失效了，这是怎么回事？

//这是更改评论盒子背景色的脚本
document.addEventListener('DOMContentLoaded', function() {
    let box = document.querySelectorAll(".comment");
    for (let i = 0; i < box.length; i++) {
        setRandomBackgroundColor(box[i]);
    }
});

//随机背景色函数
function setRandomBackgroundColor(element) {
    let letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    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>

FishC · 发表于 2024-4-26 18:03:47

问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。为了修复这个问题，您可以将setRandomBackgroundColor函数修改为以下代码：

function setRandomBackgroundColor(element) {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  element.style.backgroundColor = color;
}

这样修改后，随机颜色的功能应该能正常工作，并且不会影响原本的CSS样式。

另外，您还可以通过修改随机颜色生成算法，使得生成的颜色更加漂亮、和谐。例如，您可以使用HSL（色相、饱和度、亮度）模型来生成随机颜色，或者使用预定义的一些颜色集合，这样生成的颜色更加美观。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-4-26 18:05:24

FishC 发表于 2024-4-26 18:03
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。 ...

HSL模型是什么，又该怎么使用呢？

FishC · 发表于 2024-4-26 18:05:39

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 小助理，如未能正确解答您的问题，请继续追问。

ZhihanXing · 发表于 2024-4-26 18:11:39

FishC 发表于 2024-4-26 18:03
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。 ...

这样修改并没有解决我的问题，我使用开发者工具查看后并没有看到样式表中设置的样式

FishC · 发表于 2024-4-26 18:11:54

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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册