document.getElementById()+id是变量
时间: 2023-11-26 22:46:35 浏览: 42
是的,id可以是一个变量。在JavaScript中,可以使用变量作为`getElementById()`方法的参数来获取指定id的元素。例如:
```javascript
var myId = "myDiv";
var myElement = document.getElementById(myId);
```
上述代码中,`myId`是一个变量,它存储了要获取的元素的id。然后,将该变量作为`getElementById()`方法的参数传递,以获取具有该id的元素。
相关问题
document.getElementById(id)
这是 JavaScript 中的一个方法,它可以通过传入一个 id 参数来获取对应的 HTML 元素对象。例如:
```javascript
var element = document.getElementById("myElement");
```
这行代码会获取一个 id 为 "myElement" 的 HTML 元素对象,并将其赋值给变量 element。通过这个变量,我们就可以对该元素进行各种操作,例如修改其内容、样式等。
// 全局水印 let setWatermark = str => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 200 can.height = 200 let cans = can.getContext('2d') cans.rotate((-15 * Math.PI) / 150) cans.font = '14px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.40)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 8, can.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const set = str => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = id => { if (document.getElementById(id) !== null) { const div = document.getElementById(id) div.style.display = 'none' } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } 帮我优化代码
以下是对代码的简要优化:
1. 去除重复代码
将 `setWatermark` 函数和 `outWatermark` 函数中的重复代码提取出来,作为一个单独的函数。
2. 使用箭头函数
将所有函数都改为箭头函数,以简化代码。
3. 使用 const 和 let
将所有变量声明方式都改为 `const` 或 `let`,以便更好地控制变量的作用域。
4. 简化代码逻辑
将 `set` 函数中的定时器逻辑改为判断页面是否有水印,如果没有则添加水印。
优化后的代码如下:
```
const setWatermark = str => {
const id = '1.23452384164.123412415'
const watermarkDiv = document.getElementById(id)
if (watermarkDiv !== null) {
document.body.removeChild(watermarkDiv)
}
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = 200
canvas.height = 200
context.rotate((-15 * Math.PI) / 150)
context.font = '14px Vedana'
context.fillStyle = 'rgba(200, 200, 200, 0.40)'
context.textAlign = 'left'
context.textBaseline = 'middle'
context.fillText(str, canvas.width / 8, canvas.height / 2)
const div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '0px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
const outWatermark = id => {
const watermarkDiv = document.getElementById(id)
if (watermarkDiv !== null) {
watermarkDiv.style.display = 'none'
}
}
const set = str => {
setWatermark(str)
window.onresize = () => {
setWatermark(str)
}
}
const out = () => {
outWatermark('1.23452384164.123412415')
}
const reset = str => {
out()
set(str)
}
export default {
set,
out,
reset,
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)