글꼴 크기를 균일하게 변경하는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML이있는 경우 :

<div class="div1"> 
    <div class="div2"> 
    </div> 
    <div class="div3"> 
    </div> 
</div> 

div2 및 div3 정의 등의 글꼴 크기와 자신의 CSS를 가지고 있습니다. div1의 폰트 크기를 일정하게 줄일 수있는 방법이 있습니까? 즉, div2 및 div3에 정의 된 글꼴 크기를 가져 와서 2px으로 줄이십시오. 이것은 워드 프로세싱 소프트웨어에서 선택한 텍스트의 크기를 1 포인트 줄이기 위해 Select All -> Ctrl + Shift + <을 수행하는 것과 비슷합니다. 어떤 제안?

Answer 1

을 document.getElementById('id');으로 최상위 사업부를 얻을 후 아이의 스타일을 설정 노드 수 :

데모 : http://jsfiddle.net/SO_AMK/JjutY/

HTML :

<div class="div1"> 
    <div class="div2"> 
     Some text, and more, and more, and more, and more, and more, and more, and more, and more. 
    </div> 
    <div class="div3"> 
     Some text, and more, and more, and more, and more, and more, and more, and more, and more. 
    </div> 
    <button class="increaseFontSize">Increase Font Size</button> 
</div>​ 

jQuery를 :

$(".increaseFontSize").click(function(){ 
     var fontSize = getFontSize($(".div3")); 
     var newFontSize = fontSize + 2; 
     $(".div3").css("font-size", newFontSize); 
     return false; 
}); 
function getFontSize(element) { 
    var currentSize = $(element).css("font-size"); 
    var currentSizeNumber = parseFloat(currentSize); 
    return currentSizeNumber; 
} 

Answer 2

나는 당신이 CSS로 그렇게 할 수 있다고 생각하지 않지만 누군가 나를 어떻게 친절하게 교육하는지 안다면 나는 생각하지 않는다.

내가 생각할 수있는 유일한 해결책은 div2 및 div3 요소가 영향을받지 않으며 div1 요소 아래에 중첩 된 div2 및 div3에만 영향을 미치도록 요소를 중첩시키는 것입니다.

div.div2 { font-size:14px; } 
    div.div3 { font-size:12px; } 

    div.div1 div.div2 { font-size:12px; } 
    div.div1 div.div3 { font-size:10px; } 

Answer 3

글꼴 크기를 백분율 또는 em으로 설정하면 픽셀을 사용할 수 있지만 픽셀은 사용할 수 없습니다. 다음 예제에서 div1 font-size를 변경하면 div2와 div3에 모두 적용됩니다. 글꼴 크기를 설정하여

/* percentage to px scale (very simple) 
80% = 8px 
100% = 10px 
120% = 12px 
140% = 14px 
180% = 18px 
240% = 24px 
260% = 26px 
*/ 

body 
{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:10px; 
} 

: 또한 여기 CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

.div1{ 
    font-size:16px; 
} 

.div2{ 
    font-size:80%; 
} 

.div3{ 
    font-size:90%; 
} 

내가 설정 내 웹 사이트에 글꼴 크기를 사용하는 것입니다 단위 유형 글꼴 크기의 비교를 위해이 문서를 참조하십시오 body 요소의 속성과 같은 속성을 사용하면 다른 모든 글꼴의 글꼴 크기를 100 % = 10px로 설정하면됩니다. 또한 동일한 글꼴 크기 설정을 사용하므로 jQuery ui 라이브러리를 훨씬 쉽게 사용할 수 있습니다.

Answer 4

내부 divs 글꼴 크기를 ems으로 설정하면 간단합니다. 이 있던 경우에 변경하려는 경우 ...

.div2 { 
    font-size: 1.8em; /*180% of inherited font-size */ 
} 

.div3 { 
    font-size: 1.4em; /*140% of inherited font-size */ 
} 

... 다음 div1의 font-size, .div2 및 .div3의 font-size의 비례 변경합니다. 자바 스크립트와

Answer 5

기본 개념 :

var divs = document.getElementsByTagName('div'); 
for(int i = 0; i < divs.Length; ++i) { 
    var element = divs[i]; 
    element.style.setAttribute('font-size', '2px'); //whatever you need to set it to 
} 

은 위의 모든 사업부의 글꼴 크기를 변경합니다. 분명히 이것은 아마도 당신을 위해 그것을하지 않을 것입니다 ...하지만 당신은 코드를 수정하는 몇 가지 일을 할 수 있습니다. 당신은 내가이 당신이 원하는 무엇이라고 생각