javascript更改字體大小

Question

大家好，對不起，如果您發現這個問題很愚蠢。 誰能幫我改變打印輸出的字體嗎？ 他們說.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>

Answer 1

我建議以下內容：

document.getElementById('display-date').style.fontSize = '2em'; // or whatever measurement.

而且，由於我花了一些時間，所以有一個函數：

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

像這樣打電話：

fontSizeChange('display-date', 3);

JS小提琴演示。

要么：

fontSizeChange(document.getElementById('display-date'), 4);

JS小提琴演示。

或（如果要使用默認設置，則可以省略factor參數）：

fontSizeChange('display-date');

JS小提琴演示。

而且，當然，您也可以縮小范圍：

fontSizeChange('display-date',0.25);

JS小提琴演示。

您當然也可以使用CSS：

#display-date {
    font-size: 2em;
}

JS小提琴演示。

一個更新的版本，它允許將大小調整附加到返回的元素（ document.querySelector() / document.getElementById() ）或nodeList（ 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);

JS小提琴演示。

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

JS小提琴演示。

參考文獻：

element.style 。

Answer 2

您可以使用style屬性從javascript更改css屬性

document.getElementById('display-date').style.fontSize = '2em'

Answer 3

除了使用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>

javascript更改字體大小

問題描述

3 個解決方案

解決方案1
4 已采納 2013-04-28 15:08:08

解決方案2
0 2013-04-28 15:08:57

解決方案3
0 2013-04-28 15:12:56

javascript更改字體大小

問題描述

3 個解決方案

解決方案1 4 已采納 2013-04-28 15:08:08

解決方案2 0 2013-04-28 15:08:57

解決方案3 0 2013-04-28 15:12:56

解決方案1
4 已采納 2013-04-28 15:08:08

解決方案2
0 2013-04-28 15:08:57

解決方案3
0 2013-04-28 15:12:56