JavaScript修改transform: scale属性失效问题求助

开发幻灯片组件时，希望dots元素默认隐藏，点击左上角长笛按钮后显示。调用changeScale函数修改dots的transform: scale属性无效果，尝试正则替换scale值、绑定onClick后仍未解决。

核心原因 #

• 行内样式与样式表样式的差异：element.style.transform仅能读取元素的行内样式，而你的dots元素（#dot1/#dot2/#dot3）的scale值是定义在CSS样式表中的，初始状态下div1.style.transform为空字符串，正则替换无法匹配到scale(...)片段，最终赋值后仍为空，导致样式无变化。
• 正则表达式存在冗余：/scale\([0-9|\.]*\)/中的|是多余的，正确写法应为/scale\([0-9.]*\)/，但这不是导致问题的关键。

解决方案 #

方案1：直接赋值transform属性 #

无需正则替换，直接给行内样式赋值新的scale值即可（初始无行内transform，直接覆盖不会冲突）：

修改changeScale函数：

function changeScale(newScale) {
  var div1 = document.getElementById("dot1");
  var div2 = document.getElementById("dot2");
  var div3 = document.getElementById("dot3");

  // 直接设置transform，替代正则替换逻辑
  div1.style.transform = `scale(${newScale})`;
  div2.style.transform = `scale(${newScale})`;
  div3.style.transform = `scale(${newScale})`;
}

同时建议将HTML中的调用参数从changeScale(4)改为changeScale(1)——scale(4)会让dots放大4倍，显示效果异常，scale(1)是正常大小。

方案2：用CSS类控制（更推荐） #

通过添加/移除CSS类来控制显示，语义化更强，也更易维护：

1. 在CSS中新增类：

.dot.show {
  transform: scale(1);
}

2. 修改changeScale函数：

function changeScale() {
  var dots = document.getElementsByClassName("dot");
  for(let dot of dots) {
    dot.classList.add("show");
  }
}

3. 更新HTML中的调用：

<img src="image1.webp" title="Golden Flute Background (possibly article?)" onclick="currentSlide(1); changeScale(); ">

默认dots是scale(0)隐藏状态，点击后添加show类切换为scale(1)显示状态。

修改后的完整代码示例（方案1） #

JavaScript #

let slideIndex = 1;

// 切换幻灯片（前后箭头）
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// 切换到指定幻灯片（点击dots）
function currentSlide(nu) {
  showSlides(slideIndex = nu);
}

// 修改dots的scale值
function changeScale(newScale) {
  var div1 = document.getElementById("dot1");
  var div2 = document.getElementById("dot2");
  var div3 = document.getElementById("dot3");

  div1.style.transform = `scale(${newScale})`;
  div2.style.transform = `scale(${newScale})`;
  div3.style.transform = `scale(${newScale})`;
}

// 控制幻灯片显示逻辑
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");

  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }

  // 隐藏所有幻灯片
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 移除所有dots的active类
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // 显示当前幻灯片，标记对应dot为active
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

CSS #

.h2 {
  font-family: 'Roboto', serif;
}

body {
  background-color: #000;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 400px;
  justify-content: center;
  align-items: center;
  border-radius: 3rem;
  z-index: 100;
  transition-duration: 0.1s;
}

.wrapper:hover {
  text-shadow: 5px 5px 4px lightgray;
  cursor: pointer;
  transition-duration: 0.2s;
}

.wrapper .image {
  overflow: hidden;
  border-radius: 1rem;
}

.wrapper .image img {
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.5s;
}

.wrapper:hover img {
  transform: scale(1.5);
}

.wrapper .infocontent {
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0.5px 2px 10px rgba(214, 205, 205, 0.616);
  font-weight: bold;
  font-family: Consolas;
  letter-spacing: 2px;
  color: #441d9e;
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

/* 幻灯片容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 默认隐藏幻灯片 */
.mySlides {
  display: none;
}

/* 前后切换按钮 */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(53, 49, 49, 0.37);
}

/* 幻灯片标题文本 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* 幻灯片序号文本 */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* dots样式 */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#dot1, #dot2, #dot3 {
  transform: scale(0);
}

.active,
.dot:hover {
  background-color: #717171;
}

/* 淡入动画 */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

HTML #

<h1 class="h2">Flute</h1>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

<div class="wrapper">
  <div class="image">
    <img src="image1.webp" title="Golden Flute Background (possibly article?)" onclick="currentSlide(1); changeScale(1); ">
  </div>
  <div class="infocontent">
    <h3><strong>Golden Flute</strong></h3>
  </div>
</div>

<!-- 幻灯片容器 -->
<div class="slideshow-container">
  <!-- 幻灯片1 -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img id="image" src="image1.webp" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <!-- 幻灯片2 -->
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <div class="text">Caption Two</div>
  </div>
  <!-- 幻灯片3 -->
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <div class="text">Caption Three</div>
  </div>

  <!-- 切换按钮 -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- dots容器 -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)" id="dot1"></span>
  <span class="dot" onclick="currentSlide(2)" id="dot2"></span>
  <span class="dot" onclick="currentSlide(3)" id="dot3"></span>
</div>

内容的提问来源于stack exchange，提问作者My Info