javascript javascript改变字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16264222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript change font size
提问by Boy Karton
Good day to all, Sorry if you find this question dumb. Can anyone please help me on how to change the font of the printed output? They said .style.fontSize but I don't know to how use it in that code. Any help would be much appreciated. Thanks!
大家好，如果你觉得这个问题很愚蠢，对不起。任何人都可以帮助我如何更改打印输出的字体？他们说 .style.fontSize 但我不知道如何在该代码中使用它。任何帮助将非常感激。谢谢！
<html>
<body>
<div id="display-date">
<script language="javascript">
today = new Date();
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var yr = today.getYear();
if(yr < 1900) yr += 1900;
document.write(today.getDate() + " " + month[today.getMonth()] + " " + yr);
</script>
</div>
</body>
</html>
回答by David says reinstate Monica
I'd suggest the following:
我建议如下：
document.getElementById('display-date').style.fontSize = '2em'; // or whatever measurement.
And, because I had a few moments, here's a function:
而且，因为我有一些时间，这里有一个函数：
function fontSizeChange(elem, factor) {
if (!elem) {
return false;
}
else {
factor = factor || 2; // 2 is the default
elem = elem.nodeType && elem.nodeType === 1 ? elem : document.getElementById(elem);
var cur = window.getComputedStyle(elem, null).fontSize,
size = parseInt(cur.replace(/\D+/g,''),10),
unit = cur.replace(/\d+/g,'');
elem.style.fontSize = (size * factor) + unit;
}
}
Call like so:
像这样调用：
fontSizeChange('display-date', 3);
Or:
或者：
fontSizeChange(document.getElementById('display-date'), 4);
Or (if you want to use the default setting, you can omit the factorargument):
或者（如果要使用默认设置，可以省略factor参数）：
fontSizeChange('display-date');
And, of course, you can shrink thngs too:
而且，当然，您也可以缩小 thngs：
fontSizeChange('display-date',0.25);
You could also, of course, use CSS:
当然，您也可以使用 CSS：
#display-date {
font-size: 2em;
}
An updated version that allows the resizing to be attached to a returned element (document.querySelector()/ document.getElementById()) or a nodeList (document.getElementsByTagName()/ document.querySelectorAll()):
允许将调整大小附加到返回元素 ( document.querySelector()/ document.getElementById()) 或节点列表 ( document.getElementsByTagName()/ document.querySelectorAll())的更新版本：
Object.prototype.resize = function (prop, factor) {
if (prop) {
factor = parseFloat(factor) || 2;
var self = this.length ? this : [this],
cur, size, unit;
for (var i = 0, len = self.length; i < len; i++) {
var cur = window.getComputedStyle(self[i],null)[prop],
size = parseFloat(cur.replace(/\D/g,'')),
unit = cur.replace(/\d+/g,'');
self[i].style[prop] = (size * factor) + unit;
}
}
return this;
};
document.getElementsByTagName('div').resize('width',3);
document.getElementById('display-date').resize('font-size', 2.5);
Object.prototype.resize = function (prop, factor) {
if (prop) {
factor = parseFloat(factor) || 2;
var self = this.length ? this : [this],
cur, size, unit;
for (var i = 0, len = self.length; i < len; i++) {
var cur = window.getComputedStyle(self[i],null)[prop],
size = parseFloat(cur.replace(/\D/g,'')),
unit = cur.replace(/\d+/g,'');
self[i].style[prop] = (size * factor) + unit;
}
}
return this;
};
document.querySelectorAll('div').resize('height',3);
document.querySelector('#display-date').resize('font-size', 0.5);
References:
参考：
回答by PSR
You can use styleattribute to change the css properties from javascript
您可以使用style属性从 javascript 更改 css 属性
document.getElementById('display-date').style.fontSize = '2em'
回答by vishakvkt
Instead of using document.write, you can do something like the the following
您可以执行以下操作，而不是使用 document.write
<style>
.my_style_class
{
// add your font styling information here
font-size: small;
}
</style>
<div id="display-date" class="my_style_class">
</div>
<script>
document.getElementById("display-date").innerHTML = your_function_which_gets_the_date();
</script>
