HTMLページのフォントダイアログを開く

-1

JSを使用してHTMLページでフォントダイアログ（このようなもの）を開くにはどうしたらいいですか？ HTMLページのフォントダイアログを開く

ありがとうございました。

2017-07-13 Kaprog

'あなたはフォントダイアログを開くことができません。 htmlページ。 – Dark

このようなコマンドはJavaScriptにはありませんが、独自の小さなフォント選択ツールを作成することはできます。ここでは一例です：

function updateh1family() { 
 
    var selector = document.getElementById('selecth1FontFamily'); 
 
    var family = selector.options[selector.selectedIndex].value; 
 
    var h1 = document.getElementById('text') 
 
    h1.style.fontFamily = family; 
 
} 
 

 
function updateSize() { 
 
    document.getElementById('text').style.fontSize = document.getElementById('size').value + "px"; 
 
} 
 

 
function updateColor() { 
 
    document.getElementById('text').style.color = document.getElementById('color').value; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <font id="text" style="font-size:30px;">Some text</font><br> 
 
    <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();"> 
 
    <option> Serif </option> 
 
    <option> Arial </option> 
 
    <option> Sans-Serif </option>         
 
    <option> Tahoma </option> 
 
    <option> Verdana </option> 
 
    <option> Lucida Sans Unicode </option>        
 
    </select> 
 
    <input type="number" id="size" min="0" max="70" value="30" onchange="updateSize()" /> 
 
    <input type="color" onchange="updateColor()" id="color" /> 
 
</body> 
 

 
</html>

あなたも、それはjQueryを使って、ダイアログのように見えるようにできます：あなたは `WYSIWYGを使用することができます https://jqueryui.com/dialog/

function updateh1family() { 
 
    var selector = document.getElementById('selecth1FontFamily'); 
 
    var family = selector.options[selector.selectedIndex].value; 
 
    var h1 = document.getElementById('text') 
 
    h1.style.fontFamily = family; 
 
} 
 

 
function updateSize() { 
 
    document.getElementById('text').style.fontSize = document.getElementById('size').value + "px"; 
 
} 
 

 
function updateColor() { 
 
    document.getElementById('text').style.color = document.getElementById('color').value; 
 
} 
 

 
function showDialog() { 
 
    $("#dialog").dialog(); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Dialog - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <button onclick="showDialog()">open dialog</button> 
 
    <div id="dialog" style="display:none;"> 
 
    <font id="text" style="font-size:30px;">Some text</font><br> 
 
    <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();"> 
 
    <option> Serif </option> 
 
    <option> Arial </option> 
 
    <option> Sans-Serif </option>         
 
    <option> Tahoma </option> 
 
    <option> Verdana </option> 
 
    <option> Lucida Sans Unicode </option>        
 
    </select> 
 
    <input type="number" id="size" min="0" max="70" value="30" onchange="updateSize()" /> 
 
    <input type="color" onchange="updateColor()" id="color" /> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-13 15:54:42

ありがとうございます。私はJQueryとsecoundのバージョンを使用します – Kaprog

私は助けることができてうれしいです:)受け入れてupvotingのおかげで –

あなたは大歓迎です。あなたは私の質問をupvoteできますか？ – Kaprog

どのプラットフォームを使用していますか？あなたはHTAを試しましたか？事前HTMLではこれはできません.HTAとactiveXを見てください。

出典

2017-07-13 15:03:25

HTMLページのフォントダイアログを開く

答えて

関連する問題