设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 引入js后原有css失效
返回列表 发新帖
查看: 582|回复: 5

[已解决]引入js后原有css失效

[复制链接]
ZhihanXing
发表于 2024-4-26 18:03:30 | 显示全部楼层 |阅读模式

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

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

x
我给一个页面添加了随即改变背景色的js，但是在这之后原来的css失效了，这是怎么回事？
  1. //这是更改评论盒子背景色的脚本
  2. document.addEventListener('DOMContentLoaded', function() {
  3.     let box = document.querySelectorAll(".comment");
  4.     for (let i = 0; i < box.length; i++) {
  5.         setRandomBackgroundColor(box[i]);
  6.     }
  7. });

  9. //随机背景色函数
  10. function setRandomBackgroundColor(element) {
  11.     let letters = '0123456789ABCDEF';
  12.     let color = '#';
  13.     for (let i = 0; i < 6; i++) {
  14.         color += letters[Math.floor(Math.random() * 16)];
  15.     }
  16.     element.style.backgroundColor = color;
  17. }
复制代码
  1. <%@ page import="java.util.List" %>
  2. <%@ page import="edu.zjku.bean.Comment" %>
  3. <%@ page import="edu.zjku.bean.Blog" %>
  4. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  5. <html>
  6. <head>
  7.     <title>博客详情</title>
  8.     <link rel="stylesheet" href="style/public.css"/>
  9.     <script src="script/randomColor.js"/>
  10.     <style>
  11.         .comment {
  12.             display: flex;
  13.             align-items: center;
  14.             margin: 20px auto;
  15.             padding-left: 20px;
  16.             width: 100%;
  17.             height: 50px;
  18.             color: #fff;
  19.             line-height: 50px;
  20.             text-align: center;
  21.             /*background: teal;*/
  22.             clip-path: polygon(0 0, 88% 0, 88% 35%, 95% 50%, 88% 65%, 88% 100%, 0 100%);
  23.             border: 1px solid teal;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <jsp:include page="header.jsp"/>
  29. <main>
  30.     <%--    从会话域获取博客及其评论--%>
  31.     <%
  32.         Blog blog = (Blog) session.getAttribute("blogDetail");
  33.         List<Comment> commentList = (List<Comment>) session.getAttribute("commentList");%>
  34.     <div class="blog">
  35.         <h2><%=blog.getTitle()%>
  36.         </h2>
  37.         <p><%=blog.getText()%>
  38.         </p>
  39.         <p><%=blog.getUser()%>
  40.         </p>
  41.         <p><%=blog.getTime()%>
  42.         </p>
  43.     </div>
  44.     <%
  45.         for (Comment comment : commentList) {
  46.     %>
  47.     <div class="comment">
  48.         <p><%=comment.getContent()%>
  49.         </p>
  50.         <p><%=comment.getUsername()%>
  51.         </p>
  52.         &nbsp;
  53.         <p><%=comment.getTime()%>
  54.         </p>
  55.     </div>
  56.     <%}%>
  57. </main>
  58. <jsp:include page="aside.jsp"/>
  59. <jsp:include page="footer.jsp"/>
  60. </body>
  61. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-4-26 18:03:47 | 显示全部楼层
问题出在随机背景色函数的实现上。目前的实现方式是将所有的颜色代码拼接到一起，而不是随机选择一个颜色。为了修复这个问题，您可以将setRandomBackgroundColor函数修改为以下代码：

  1. function setRandomBackgroundColor(element) {
  2.   let letters = '0123456789ABCDEF';
  3.   let color = '#';
  4.   for (let i = 0; i < 6; i++) {
  5.     color += letters[Math.floor(Math.random() * 16)];
  6.   }
  7.   element.style.backgroundColor = color;
  8. }
复制代码


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

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

HSL模型是什么，又该怎么使用呢？
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

这样修改并没有解决我的问题，我使用开发者工具查看后并没有看到样式表中设置的样式
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-4 18:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表