javascript 변경 글꼴 크기

모두에게 좋은 날, 죄송합니다.이 질문은 찾지 못했습니다. 누구든지 인쇄 된 출력의 글꼴을 변경하는 방법에 나를 도울 수 있습니까? 그들은 말했다. 스타일. 글꼴 크기.하지만 그 코드에서 어떻게 사용하는지 모르겠다. 어떤 도움이라도 대단히 감사 할 것입니다. 감사!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

과 같은 작업을 수행 할 수 있습니다 ,' 문맥?그리고 그것이 무엇을 포함 할지를 묻는 것을 고려 했습니까? –

인터넷에서. 나는 그것들 중 일부를봤을 뿐이지 어떻게 사용하는지에 대해서는 생각하지 못했다. 죄송합니다. –

나는 다음과 같은 제안하십시오 :

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

나는 약간의 시간이 있었기 때문에,

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

을 그리고를, 여기에 함수의

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합니다.

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

JS Fiddle demo :

또한, 물론, CSS를 사용할 수 있습니다.

리사이징이 리턴 소자 (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

대단히 감사합니다! –

대단히 환영합니다. 도움이되어 기뻐요! =) –

당신은 document.write를를 사용하는

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

출처

2013-04-28 15:08:57 PSR

@Boy Karton이 내 대답을 한번 봅시다. 이걸 – PSR

고마워요. 젠장! –

대신 자바 스크립트에서 CSS 속성을 변경 style 속성을 사용할 수 있습니다, 당신은 그들이 '인 다음

<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

대단히 감사합니다! –

javascript 변경 글꼴 크기

답변

관련 문제