蓝桥杯 web 图片水印生成（Dom操作、css样式动态设置)

• 实现方式：
  • 通过在页面上动态生成多个带有特定样式的 <span> 元素，模拟出水印的效果。
  • 这些 <span> 元素可以设置透明度、颜色、旋转角度等样式，使其看起来像背景水印。

小技巧：如果css属性忘了，我们可以在css文件夹中写一个，会有提示

答案：

  // TODO: 根据输入参数创建文字水印
  for(var i=0;i<count;i++){
    let ospan = document.createElement('span')
    ospan.innerHTML = text
    ospan.style.color = color
    ospan.style.opacity = opacity
    ospan.style.transform = `rotate(${deg}deg)`
    container.appendChild(ospan)
  }
    
  

该题涉及的知识点： 

1. DOM 操作

• document.createElement( ):
  • 用于动态创建 HTML 元素。
  • 在这里，每次循环都会创建一个新的 <span> 元素。
• innerHTML:
  • 设置或获取元素的内部 HTML 内容。
  • 在这里，ospan.innerHTML = text 将变量 text 的值作为 <span> 的内容。
• appendChild( )
  • 将新创建的元素追加到父容器（container）中。
  • 这里通过 container.appendChild(ospan) 将每个 <span> 添加到页面上。

2. CSS 样式动态设置

• style 属性：
  • 通过 element.style.property 动态修改元素的样式。
  • 在这里，设置了以下样式：
    • color：文字颜色。
    • opacity：透明度。
    • transform：旋转效果。
• rotate(${deg}deg)：
  • 使用 transform 属性对元素进行旋转。
  • ${deg} 是一个变量，表示旋转的角度（以度为单位）。

3. 循环与动态生成

•  for循环：
  • 通过 for 循环重复执行某些操作。
  • 在这里，循环 count 次，每次创建一个 <span> 并设置其属性。
• 动态生成多个元素：
  • 每次循环都会动态生成一个新的 <span>，并将它们逐个添加到容器中。

4. 字符串模板（Template String）

• ${ }
  • 使用模板字符串嵌入变量或表达式。
  • 在这里，rotate(${deg}deg) 中的 ${deg} 表示将变量 deg 的值插入到字符串中。