扩大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代码呈现为文本，因此您可以使用C#: JJqsQzoGdJBYb4MwQiMFFg== J/Tscript: U2FsdGVkX1+fTRNAUOEmsjzcTTnMFpUl8dfto0YdqzA= 来调整大小。

由于您似乎将它们放入ID为font-size的元素中，因此您应该可以将其添加到CSS中：

Arrows

#Arrows { font-size: 30px; } 是HTML Unicode的示例。在此处了解更多信息：https://www.w3schools.com/charsets/ref_utf_arrows.asp

Answer 2

您可以增加按钮的字体大小。例如：font-size:25px并添加.button4类。

Answer 3

您可以在元素中添加CSS类，该类定义较大的字体：document.getElementById("Arrows").classList.add('big-arrows');

或者您可以使用Font Awesome箭头，该箭头会比unicode箭头大胆。

Answer 4

只需用span包裹它并给出css。查看我的代码段，希望它可以以某种方式为您提供帮助。祝你有美好的一天

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 = '<span class="arrow">'+res+'<span>';
}

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

<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
<div id="Arrows">turn-right</div>

Answer 5

其他人已经回答了这个问题，所以我不再重复。但是，在这种情况下，我建议您使用Material Design - Icons：

.material-icons.md-24 { font-size: 24px; }
.material-icons.md-34 { font-size: 34px; }
.material-icons.md-44 { font-size: 44px; }
.material-icons.md-54 { font-size: 54px; }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

<i class="material-icons md-24">arrow_back</i>
<i class="material-icons md-34">arrow_forward</i>
<i class="material-icons md-44">arrow_upward</i>
<i class="material-icons md-54">arrow_downward</i>

只需将CSS库添加到您的代码中，然后用JS替换，就像这样：

return x='<i class="material-icons md-24">arrow_back</i>';