zentrieren Ich versuche, eine einfache Chrome-Erweiterung zu erstellen, die es dem Benutzer ermöglicht, eine Mindestschriftgröße festzulegen, die auf einer Webseite angezeigt werden kann (dies ist nützlich für sehbehinderte Menschen, die kleine Schriftgrößen nicht sehen können)Wie Text vertikal und horizontal mit einer variablen Schriftgröße in CSS
Die Erweiterung wird nur durch die Webseite schauen und wenn es eine niedrigere Schrift als die vom Benutzer angegebene Mindestschriftgröße gibt, dann wird die Schriftgröße entsprechend erhöht.
Mein Problem tritt auf, während die Erweiterung Benutzeroberfläche (das Popup) verwendet. Ich möchte die Buchstaben 'abc' in der Mitte der Box, vertikal und horizontal, aber immer wenn ich die Erhöhung Schriftgröße Knopf die Buchstaben 'abc' aus der Mitte bewegen, auch der Text ist ausgerichtet Mitte, Zeilenhöhe ist spezifizierte und vertikale Ausrichtung wird auf Mitte gesetzt.
Irgendwelche Ideen? Thanks :)
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>
Ich habe ein Java-Skript, das die Schriftgröße der Buchstaben 'abc' in Schritten von + oder - 1 ändert, je nachdem, welche Taste gedrückt wird. Aus irgendeinem Grund funktionierte das Java-Skript hinter diesen Schaltflächen überhaupt nicht in diesem Editor (vielleicht, weil es für eine Erweiterung und nicht für eine normale Webseite geschrieben wird), also habe ich es weggelassen, da es nur einen nicht verwandten Fehler verursachte Skript funktioniert perfekt in der Erweiterung) Danke für die Antwort! – Jake
Ich habe gerade das Javascript für Sie gepostet, danke :) – Jake