0
私は、ユーザーがウェブページに表示できる最小のフォントサイズを設定できるようにする簡単なクロム拡張を作成しようとしています。CSSのバリエーションフォントサイズでテキストを縦と横に配置する方法
拡張子はウェブページを見て、ユーザーが指定した最小フォントサイズよりも小さいフォントセットがあればそれに応じてフォントサイズが大きくなります。
私の問題は、拡張UI（ポップアップ）を使用している間に発生します。 文字の「abc」を縦横にボックスの中央に配置したいのですが、フォントサイズを大きくするボタンを押すたびに文字「abc」が中央からずれるようになります。指定された垂直方向の配置は中央に設定されます。
アイデア？感謝:)
var FS = 20;
var abc = document.getElementById("tester");
var SmlBtn = document.getElementById("SizeMns");
var BigBtn = document.getElementById("SizePls");
if(SmlBtn != null){
SmlBtn.addEventListener('click', function() {
FS = FS - 1;
\t \t console.log(FS);
\t \t abc.style.fontSize = FS;
\t \t chrome.storage.sync.set({'fontSize': FS}, function() {
\t \t // Notify that we saved.
\t \t console.log('your font size has been saved to ' + FS.toString());
\t \t });
});
}
if(BigBtn != null){
\t BigBtn.addEventListener('click', function() {
\t \t FS = FS + 1;
\t \t console.log(FS);
\t \t abc.style.fontSize = FS;
\t \t chrome.storage.sync.set({'fontSize': FS}, function() {
\t \t // Notify that we saved.
\t \t console.log('your font size has been saved to ' + FS.toString());
\t \t });
\t });
}html {
text-align: center;
width: 290px;
\t height: 590px;
}
body {
position: relative;
overflow-x: hidden;
overflow-y: auto;
display: inline-block;
min-height: 200px;
max-height: 590px;
min-width: 285px;
max-width: 290px;
margin: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-family: 'Segoe UI', 'PT Sans', 'Helvetica Neue', 'FreeSans', sans-serif;
font-size: 20px;
font-weight: 400;
color: #43435e;
text-align: center;
background: #ffffff;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header {
\t display: block;
\t background-color:#00b7f1;
\t color: #;
\t padding:;
\t height:50px;
\t line-height: 46px;
\t font-size:25;
\t font-weight:600
}
.content {
\t position: fixed;
bottom: 0;
width: 290px;
\t height: 46px;
\t line-height: 40px;
\t padding: 0px;
\t background-color: rgba(0,0,80,0.6);
}
#tester {
\t vertical-align: middle;
\t text-align: center;
\t display: table-cell;
\t vertical-align: middle;
\t padding:;
}<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="popup.css">
\t </head>
\t <body>
\t \t <div class="header">Increase Font Size</div>
\t \t \t \t <p id="tester" font-size="FS">abc</p>
\t \t \t <div class="content">
\t \t \t \t <button type="button" id="SizeMns">-</button>
\t \t \t \t <button type="button" id="SizePls">+</button>
\t \t \t </div>
\t \t <script src="popup.js"></script>
\t </body>
</html>
私はあなたが押したボタンに応じて、文字「abc」のフォントサイズを+または - 1ずつ変更するJavaスクリプトをいくつか持っています。 これらのボタンの背後にあるJavaスクリプトは、このエディタでは機能しませんでした。スクリプトは完全に拡張機能で動作します） 返信いただきありがとうございます！ – Jake
私はちょうどあなたのために、Javascriptを投稿しました： – Jake