javascript - 在 Javascript 中放大箭头大小

Question

按下按钮后，我得到的箭头是像这样:

有没有办法增加箭头的大小，使其更显眼？谢谢你的帮助。

function ChangetoArrows() {
    var str = document.getElementById("Arrows").innerHTML;
    var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x){
        
        if(x=='undefined'){return x='↑';}
        if(x=='turn-right'){return x='→';}
        if(x=='turn-slight-right'){return x='→';}
        if(x=='turn-left'){return x='←';}
        if(x=='turn-slight-left'){return x='←';}
        
        else{return x;}//must need
    });
    
    document.getElementById("Arrows").innerHTML = res;
}

.button4{
background-color: Yellow;
color: black;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

 <button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>

Answer 1

HTML 代码呈现为文本，因此您可以使用 font-size 调整大小。

因为看起来你将它们放入一个带有 id Arrows 的元素中，你应该能够将它添加到你的 css 中:

#Arrows {
  font-size: 30px;
}

→ 是 HTML unicode 的一个例子。在此处了解更多信息:https://www.w3schools.com/charsets/ref_utf_arrows.asp