javascript改變字體大小

美好的一天，對不起，如果你發現這個問題愚蠢。任何人都可以請幫助我如何更改打印輸出的字體？他們說.style.fontSize，但我不知道如何在代碼中使用它。任何幫助將非常感激。謝謝！javascript改變字體大小

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

來源

2013-04-28 Boy Karton

誰是「他們，' 在上下文中？你是否考慮問他們會涉及什麼？ – 2013-04-28 15:08:44

在互聯網上。我只是搜索了一些，但不知道如何使用它們。抱歉。 – 2013-04-28 15:10:17

我建議如下：

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 Fiddle demo。

或者：

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

JS Fiddle demo。

或者（如果您想使用默認設置，你可以省略factor參數）：

fontSizeChange('display-date');

JS Fiddle demo。

，當然，你可以收縮thngs太：

fontSizeChange('display-date',0.25);

JS Fiddle demo。

你也可以，當然，使用CSS：

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

JS Fiddle demo。

的更新的版本，其允許調整大小，以附接至返回元件（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);

JS Fiddle demo。

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 Fiddle demo。

參考文獻：

element.style。

來源

2013-04-28 15:08:08

非常感謝！ – 2013-04-28 15:12:20

非常歡迎，我很高興得到了一些幫助！ =） – 2013-04-28 15:13:01

您可以使用style屬性從JavaScript改變的CSS屬性

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

來源

2013-04-28 15:08:57 PSR

@Boy Karton看到我的答案once.try這 – PSR 2013-04-28 15:10:42

非常感謝老兄！ – 2013-04-28 15:11:57

而不是使用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>

來源

2013-04-28 15:12:56 vishakvkt

非常感謝！ – 2013-04-28 16:33:20

javascript改變字體大小

回答

相關問題