blocks|key|1819567|text|从fontSize获得的值类似于“12+is”或"1.5em"，因此将1添加到该字符串将导致"12px1“或"1.5em1”。您可以获取字体大小并使用以下方法操作它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1819568|var+fontSize+=+parseInt(x);
fontSize+=+fontSize+%2B+1+%2B+"px";
document.getElementById("foo").style.fontSize+=+fontSize;|code-block|syntax|javascript|1819569|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The value that you are getting from fontSize is something like "12px" or "1.5em", so adding 1 to that string will result in "12px1" or "1.5em1". You can take the font size and manipulate it with:</p>

<pre><code>var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
</code></pre>


blocks|key|1268910|text|仅仅抓取元素的style.fontSize可能不起作用。如果font-size是由样式表定义的，这将报告""+(空字符串)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1268911|您应该使用window.getComputedStyle。|1268912|var+el+=+document.getElementById('foo');
var+style+=+window.getComputedStyle(el,+null).getPropertyValue('font-size');
var+fontSize+=+parseFloat(style);+
//+now+you+have+a+proper+float+for+the+font+size+(yes,+it+can+be+a+float,+not+just+an+integer)
el.style.fontSize+=+(fontSize+%2B+1)+%2B+'px';|code-block|syntax|javascript|1268913|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle^0|7|E|U|9|1G|2|0|5|N|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Just grabbing the <code>style.fontSize</code> of an element may not work. If the <code>font-size</code> is defined by a stylesheet, this will report <code>""</code> (empty string).</p>

<p>You should use <a href="https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle">window.getComputedStyle</a>.</p>

<pre><code>var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';
</code></pre>


blocks|key|1269689|text|如果您使用的是Jquery，则以下是解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1269690|var+fontSize+=+$("#foo").css("fontSize");
fontSize++=+parseInt(fontSize)+%2B+1+%2B+"px";
$("#foo").css("fontSize",+fontSize+);|code-block|syntax|javascript|1269691|希望这能成功。|1269692|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you are using Jquery than following is the solution.</p>

<pre><code>var fontSize = $("#foo").css("fontSize");
fontSize  = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );
</code></pre>

<p>Hope this will work.</p>


blocks|key|1615397|text|如果您的元素没有字体大小属性，则代码将返回空字符串。您的元素没有必要具有字体大小属性。元素可以从父元素继承属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1615398|在这种情况下，您需要找到计算的字体大小。试试这个(不确定IE)|1615399|var+computedFontSize+=+window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);|code-block|syntax|javascript|1615400|变量computedFontSize将以单位的字体大小返回。单位可以是px，em，%25。您需要去掉该单元来执行算术操作并分配新值。|1615401|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If your element don't have font-size property your code will return empty string. Its not necessary that your element should have font-size property. The element can inherit the properties from parent elements.</p>

<p>In this case you need to find the computed font-size. Try this (not sure about IE)</p>

<pre><code>var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);
</code></pre>

<p>The variable computedFontSize  will return with the font size with unit. Unit can be px, em, %. You need to strip out the unit to do an arithmetic operation and assign the new value.</p>


blocks|key|1615448|text|试试这个，它肯定会帮助你确定字体的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1615449|var+elem+=+document.createElement('div');
var+t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var+myfontSize+=+getStyle(elem,"fontSize")
alert(myfontSize)
document.body.removeChild(elem);

function+getStyle(elem,prop){
if+(elem.currentStyle)+{
var+res=+elem.currentStyle.margin;
}+else+if+(window.getComputedStyle)+{
if+(window.getComputedStyle.getPropertyValue){
var+res=+window.getComputedStyle(elem,+null).getPropertyValue(prop)}
else{var+res+=window.getComputedStyle(elem)[prop]+};
}
return+res;
}|code-block|syntax|javascript|1615450|我们还可以使用getter和setter来确定fontsize是否经过任何代码修改|1615451|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this it would definately help you in determining the font size</p>

<pre><code>var elem = document.createElement('div');
var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)
document.body.removeChild(elem);

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}
</code></pre>

<p>we can further use getter and setter to determine if fontsize is changed afterwards by any peice of code</p>


blocks|key|1269008|text|如果html元素具有内联样式，则可以使用.style.fontSize获取字体大小！|type|ordered-list-item|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1269009|当html元素没有内联样式时，您必须使用Window.getComputedStyle()函数来获得字体大小！|1269010|unstyled|1269011|1269012|，这是我的演示代码！|1269013|​|1269014|function+tureFunc()+{
++++alert(document.getElementById("fp").style.fontSize);
++++console.log(`fontSize+=+${document.getElementById("fp").style.fontSize}`);
}
function+falseFunc()+{
++++alert(+false+?+document.getElementById("fh").style.fontSize+:+"check+the+consloe!");
++++console.log(`fontSize+=+${document.getElementById("fh").style.fontSize}`);
}
function+getTheStyle(){
++++let+elem+=+document.getElementById("elem-container");
++++let+fontSize+=+window.getComputedStyle(elem,null).getPropertyValue("font-size");
++++//+font-size+!===+fontSize
++++console.log(`fontSize+=+${fontSize}`);
	+++alert(fontSize);
++++document.getElementById("output").innerHTML+=+fontSize;
}
//+getTheStyle();|code-block|syntax|javascript|1269015|<p+id="fp"+style="font-size:120%25">
++++This+is+a+paragraph.
++++<mark>inline+style+:+<code>style="font-size:120%25"</code></mark>
</p>
<button+type="button"+onclick="tureFunc()">Return+fontSize</button>
<h3+id="fh">
++++This+is+a+H3.+<mark>browser+defualt+value</mark>
</h3>
<button+type="button"+onclick="falseFunc()">Not+Return+fontSize</button>
<div+id="elem-container">
<mark>window.getComputedStyle+&+.getPropertyValue("font-size");</mark><br/>
<button+type="button"+onclick="getTheStyle()">Return+font-size</button>
</div>
<div+id="output"></div>|1269016|1269017|参考链接：|1269018|https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle|1269019|entityMap|0|LINK|mutability|MUTABLE|url^0|2|6|A|4|11|4|K|F|0|1|6|9|4|1E|4|K|P|0|0|0|0|A|0|0|0|0|0|0|5|0|0|20|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|D]]|E|@]|F|$]]|$1|I|3|-4|5|J|7|1Q|8|@]|E|@]|F|$]]|$1|K|3|-4|5|J|7|1R|8|@]|E|@]|F|$]]|$1|L|3|M|5|J|7|1S|8|@$9|1T|A|1U|B|C]]|E|@]|F|$]]|$1|N|3|O|5|J|7|1V|8|@]|E|@]|F|$]]|$1|P|3|Q|5|R|7|1W|8|@]|E|@]|F|$S|T]]|$1|U|3|V|5|R|7|1X|8|@]|E|@]|F|$S|T]]|$1|W|3|O|5|J|7|1Y|8|@]|E|@]|F|$]]|$1|X|3|Y|5|J|7|1Z|8|@$9|20|A|21|B|C]]|E|@]|F|$]]|$1|Z|3|10|5|J|7|22|8|@]|E|@$9|23|A|24|1|25]]|F|$]]|$1|11|3|-4|5|J|7|26|8|@]|E|@]|F|$]]]|12|$13|$5|14|15|16|F|$17|10]]]]

<ol>
<li>if the <strong>html element</strong> has <strong>inline style</strong>, you can using the <code>.style.fontSize</code> to get the <strong>font-size</strong>!</li>
<li>when the <strong>html element</strong> doesn't has <strong>inline style</strong>, you have to using the <code>Window.getComputedStyle()</code> function to get the <strong>font-size</strong>!</li>
</ol>

<p><strong><em>here is my demo codes!</em></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function tureFunc() {
    alert(document.getElementById("fp").style.fontSize);
    console.log(`fontSize = ${document.getElementById("fp").style.fontSize}`);
}
function falseFunc() {
    alert( false ? document.getElementById("fh").style.fontSize : "check the consloe!");
    console.log(`fontSize = ${document.getElementById("fh").style.fontSize}`);
}
function getTheStyle(){
    let elem = document.getElementById("elem-container");
    let fontSize = window.getComputedStyle(elem,null).getPropertyValue("font-size");
    // font-size !=== fontSize
    console.log(`fontSize = ${fontSize}`);
	   alert(fontSize);
    document.getElementById("output").innerHTML = fontSize;
}
// getTheStyle();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="fp" style="font-size:120%"&gt;
    This is a paragraph.
    &lt;mark&gt;inline style : &lt;code&gt;style="font-size:120%"&lt;/code&gt;&lt;/mark&gt;
&lt;/p&gt;
&lt;button type="button" onclick="tureFunc()"&gt;Return fontSize&lt;/button&gt;
&lt;h3 id="fh"&gt;
    This is a H3. &lt;mark&gt;browser defualt value&lt;/mark&gt;
&lt;/h3&gt;
&lt;button type="button" onclick="falseFunc()"&gt;Not Return fontSize&lt;/button&gt;
&lt;div id="elem-container"&gt;
&lt;mark&gt;window.getComputedStyle &amp; .getPropertyValue("font-size");&lt;/mark&gt;&lt;br/&gt;
&lt;button type="button" onclick="getTheStyle()"&gt;Return font-size&lt;/button&gt;
&lt;/div&gt;
&lt;div id="output"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>reference links:</strong></p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle</a></p>


blocks|key|1819781|text|使它适用于每一种情况|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1819782|有时(例如，当使用媒体查询时)上述答案不起作用，以下是如何实现它的方法：|1819783|const+fontSize+=+window.getComputedStyle(el).fontSize|code-block|syntax|javascript|1819784|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<h1>Making it work for every case</h1>

<p>Sometimes (when using media queries for instance) the above answers don't work, here is how to achieve it anyway:</p>

<pre class="lang-js prettyprint-override"><code>const fontSize = window.getComputedStyle(el).fontSize
</code></pre>


blocks|key|1269810|text|下面是如何获得顶级font-size+(与html标记相关联)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1269811|window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('font-size');|code-block|syntax|javascript|1269812|检查它是否是默认的16+to很有用。|1269813|entityMap^0|9|9|L|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Here is how you get the top-level <code>font-size</code> (associated to <code>html</code> tag):</p>
<pre><code>window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('font-size');
</code></pre>
<p>It's useful  to check if it's the default 16px or not.</p>


blocks|key|1615543|text|这很简单，但很有帮助！根据需要替换el。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1615544|window.getComputedStyle(document.querySelector('el')).fontSize;|code-block|syntax|javascript|1615545|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It's simple yet helpful! Replace  <em>el</em>  as needed.</p>
<pre><code>window.getComputedStyle(document.querySelector('el')).fontSize;
</code></pre>


<p>I was reading a question on here trying to get the font size of a text.  The answer they gave was to get the pixel size using a measure method.  All i want to be able to do is get the font size value so i can change it.</p>

<p>For example:</p>

<pre class="lang-js prettyprint-override"><code>var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;
</code></pre>

<p>This example does not work though these two do</p>

<ol>
<li><code>document.getElementById("foo").style.fontSize = "larger";</code></li>
<li><code>document.getElementById("foo").style.fontSize = "smaller";</code></li>
</ol>

<p>The only problem is that it only changes the size once.</p>


How To Get Font Size in HTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在这里读到一个问题，试图得到文本的字体大小。他们给出的答案是用一种测量方法得到像素大小。我想要做的就是得到字体大小值，这样我就可以更改它了。例如：var x = document.getElementById("foo").style.fontSize;document.getElementById("foo").s...

问如何在HTML中获取字体大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中获取字体大小EN