css 如何在HTML中获取字体大小

f8rj6qna  于 2022-12-15  发布在  其他
关注(0)|答案(9)|浏览(268)

我在这里阅读一个问题,试图得到一个文本的字体大小。他们给出的答案是用一个度量方法得到像素大小。我想做的就是得到字体大小值,这样我就可以改变它。
例如:

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

虽然这两个示例可以工作,但此示例不工作

  1. document.getElementById("foo").style.fontSize = "larger";
  2. document.getElementById("foo").style.fontSize = "smaller";
    唯一的问题是它只改变了一次大小。
kmb7vmvb

kmb7vmvb1#

仅仅获取元素的style.fontSize可能不起作用。如果font-size是由样式表定义的,这将报告""(空字符串)。
您应该使用window.getComputedStyle

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';
hgncfbus

hgncfbus2#

如果你的元素没有字体大小属性,你的代码将返回空字符串。你的元素没有必要有字体大小属性。元素可以从父元素继承属性。
在这种情况下,你需要找到计算的字体大小。尝试这个(不确定IE)

var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);

变量computedFontSize将返回带有单位的字体大小。单位可以是px、em、%。您需要去掉单位来执行算术运算并分配新值。

31moq8wy

31moq8wy3#

如果您使用的是Jquery,那么下面是解决方案。

var fontSize = $("#foo").css("fontSize");
fontSize  = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );

希望这能管用。

qyzbxkaa

qyzbxkaa4#

∮让它适用于每一个案例∮
有时候(例如使用媒体查询时)上述答案不起作用,下面是如何实现它的方法:

const fontSize = window.getComputedStyle(el).fontSize
oo7oh9g9

oo7oh9g95#

从fontSize得到的值类似于“12px”或“1.5em”,因此在该字符串中添加1将得到“12px1”或“1.5em1”。您可以使用字体大小并使用以下命令操作它:

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
b09cbbtk

b09cbbtk6#

1.如果html元素内联样式,则可以使用.style.fontSize来获取font-size
1.当html元素没有inline style时,你必须使用Window.getComputedStyle()函数来获得font-size

这里是我的演示代码!

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();
<p id="fp" style="font-size:120%">
    This is a paragraph.
    <mark>inline style : <code>style="font-size:120%"</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>

参考链接:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

uurv41yg

uurv41yg7#

简单而有用!根据需要替换 el

window.getComputedStyle(document.querySelector('el')).fontSize;

更新日期:

使用开发者的工具,如在 chrome 。这是更好的。请参阅图片附件。

ux6nzvsh

ux6nzvsh8#

试试这个,它肯定会帮助你确定字体大小

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;
}

我们可以进一步使用getter和setter来确定fontsize是否在以后被任何代码段更改

evrscar2

evrscar29#

下面是获取顶级font-size(与html标记关联)的方法:

window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('font-size');

检查它是否是默认的16px是很有用的。

相关问题