javascript console.log是否可以使用字母间距来设置样式?

2w2cym1i  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(86)

我现在正在做一个小项目,你必须猜出它是哪个词。目前,我正在使用Chrome DevTools(文本游戏,而不是像网页那样的视觉)。
我决定在console.log中添加一些样式。颜色、大小和粗细都很好,但字母间距就不行了。
有没有可能在日志中增加一些字母间距?下面是一个例子:log(“这只是一些测试”,“letter-spacing:20 px;”)字母之间没有空格,这很正常。
下面是我的示例脚本;

function word(){
    const answer = "WHITE"
    const input = prompt("Guess word")
    const userInput = input.toUpperCase()

    const letters = []
    let lStr = ``

    function style(color,size,weight){
        return `color:${color}; font-size: ${size}px; font-weight: ${weight}; letter-spacing: 2px;`
    }
    
    for (let i = 0; i < 5; i++) {
        if( userInput[i] === answer[i] ){
            letters.push({str:`%c${userInput[i]}`, style:style("green","25","bold"), id:i})
        } else
        if( answer.includes(userInput[i]) ){
            letters.push({str:`%c${userInput[i]}`, style:style("yellow","25","bold"), id:i})
        } else {
            letters.push({str:`%c${userInput[i]}`, style:style("red","25","bold"), id:i})
        }
         
    }

    console.log(letters)
    for (let j = 0; j < 5; j++) {
        lStr += letters[j].str + " "
    }

    console.log(`${lStr}`, `${letters[0].style}`,`${letters[1].style}`,`${letters[2].style}`,`${letters[3].style}`,`${letters[4].style}`);

}

字符串
注意:没有添加字母[j].str +““代替字母[j].str,因为字母间距不起作用。

polhcujo

polhcujo1#

可以在console.log()中使用的CSS样式集依赖于浏览器。MDN有Firefox的列表,但在其他浏览器中可能类似。

  • background及其手写体等价物
  • border及其手写体等价物
  • border-radius
  • box-decoration-break
  • box-shadow
  • clearfloat
  • color
  • cursor
  • display
  • font及其手写体等价物
  • line-height
  • margin
  • outline及其手写体等价物
  • padding
  • text-*属性,如text-transform
  • white-space
  • word-spacingword-break
  • writing-mode

不幸的是,letter-spacing不在其中。

相关问题