2013-05-09 26 views
5

czy istnieje sposób w javascript/css, że mogę zmienić rozmiar tekstu wszystkich etykiet, nagłówków, akapitów itp. Za pomocą jednego kliknięcia i bez jawnego pobierania identyfikatora elementu, a następnie zmiany jego czcionki rozmiar.zmiana rozmiaru czcionki tekstowej całej zawartości strony

to, co teraz robię, polega na tym, że uzyskuję identyfikator elementu poprzez javascript i wyraźnie zmieniam jego rozmiar. Aby uzyskać jasny obraz tego, co robię sprawdzić ten link lub sprawdź następujący kod

<script type="text/javascript"> 
function changemysize(myvalue) { 
    var div = document.getElementById("mymain"); 
    div.style.fontSize = myvalue + "px"; 
} 
</script> 

HTML kod

Choose a text size: 
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font> 
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font> 
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font> 
<div id="mymain"> 
Only this text gets affected 
</div> 

Odpowiedz

1

Dodaj id do znacznika body a następnie iść do przodu i zmienić jego rozmiar czcionki z JavaScript. Spowoduje to zmianę rozmiaru czcionki dla każdego elementu na stronie internetowej! To takie proste!

+2

lub po prostu styl ciało –

+3

Nie trzeba ID ciała, wystarczy użyć 'document.body'. –

1

Zalecam stosowanie ems jako miary dla ustawiania rozmiarów czcionek. W ten sposób za pomocą 1 znacznika można zmienić rozmiary czcionek każdego elementu względnie, zamiast określać określone rozmiary. Przykład:

body { 
    font-size: 1em; 
} 

h1 { 
    font-size: 1.5em; 
} 

h2 { 
    font-size: 1.3em; 
} 

p.large { 
    font-size: 1.2em; 
} 

Następnie można zastosować klasę do ciała, tak jak

body.enlarged { 
    font-size: 1.3em; 
} 

Które skalowanie rozmiaru czcionki wszystkie elementy odpowiednio. Kod JavaScript pójdzie coś takiego:

document.body.classList.add('enlarged'); 

Demo tutaj: http://jsfiddle.net/bW9fM/1/

+0

Dlaczego warto mieszać zwykłe js z jquery? –

+0

@BramVanroy jQuery służy do demonstracji do wiązania obsługi; to nie jest część pytania (związał własnego handlarza, albiet w kiepski sposób) pytanie nie zostało oznaczone przez jQuery, dlatego nie użyłem jQuery '.addClass()'. Używanie biblioteki nie oznacza, że ​​nie możesz używać surowego JS. Jeśli poprawi to twoje życie, oto jest [wersja js] (http://jsfiddle.net/bW9fM/1/) i [wersja jQuery] (http://jsfiddle.net/bW9fM/2/). –

3

Można użyć rem, która jest lepsza niż w niektórych miejscach em ponieważ em kaskady i rem nie.

Wszystkie długości są określone w rem, można dostosować rozmiary, zmieniając rozmiar czcionki elementu <html>.

Zobacz także: http://snook.ca/archives/html_and_css/font-size-with-rem

+0

Bardzo przydatna wskazówka! Wstyd wymaga IE9 plus, ponieważ 'ems' może być zarówno błogosławieństwem, jak i klątwą. Prawdopodobnie użyję 'rem' od teraz, jeśli nie dbam o starsze IE. –

0

pracował dla mnie:

function changeFont(element){ 
    element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New"); 
    for(var i=0; i&lt;element.children.length; i++){ 
     changeFont(element.children[i]); 
    } 
} 
changeFont(document.getElementsByTagName("body")[0]); 
Powiązane problemy