jQuery zmieniając rodzinę czcionek i rozmiar czcionki

Próbuję zmienić rodzinę czcionek i rozmiar czcionki tekstu, który pojawia się w obszarze tekstowym i kontenerze, wybierając czcionkę z listy, rozmiar czcionki powinien zostać poprawiony. Próbuję również zmienić kolor tła po wybraniu czcionki.jQuery zmieniając rodzinę czcionek i rozmiar czcionki

To jest mój kod:

<script type="text/javascript">  
    function changeFont(_name) { 
     document.body.style.fontFamily = _name; 
     document.textarea = _name; 
    } 
    </script> 

</head> 
<body style="font-family"> 
    <form id="myform"> 
     <input type="text" /> 
     <button>erase</button> 
     <select id="fs" onchange="changeFont(this.value);"> 
      <option value="arial">Arial</option> 
      <option value="verdana">Verdana</option> 
      <option value="impact">Impact</option> 
      <option value="'ms comic sans'">MS Comic Sans</option> 
     </select> 
     <div align="left"> 
      <textarea style="resize: none;" id="mytextarea" 
       cols="25" rows="3" readonly="readonly" wrap="on"> 
       Textarea 
      </textarea> 
      <div id='container'> 
       <div id='float'> 
        <p>This is a container</p> 
       </div> 
    </form> 
</body>

Kiedy próbuję go w przeglądarce rodzina czcionki nie zmienia się w polu tekstowym. Zmienia się tylko w kontenerze. Teraz wiem również, jak ustawić nowy rozmiar czcionki i tło dla kontenera i obszaru tekstowego po wybraniu rodziny czcionek.

Doceniam każdą pomoc facetów!

Źródło

2011-10-04 Tomala

Pełna roztwór roboczy:

HTML:

<form id="myform"> 
    <button>erase</button> 
    <select id="fs"> 
     <option value="Arial">Arial</option> 
     <option value="Verdana ">Verdana </option> 
     <option value="Impact ">Impact </option> 
     <option value="Comic Sans MS">Comic Sans MS</option> 
    </select> 

    <select id="size"> 
     <option value="7">7</option> 
     <option value="10">10</option> 
     <option value="20">20</option> 
     <option value="30">30</option> 
    </select> 
</form> 

<br/> 

<textarea class="changeMe">Text into textarea</textarea> 
<div id="container" class="changeMe"> 
    <div id="float"> 
     <p> 
      Text into container 
     </p> 
    </div> 
</div>

jQuery:

$("#fs").change(function() { 
    //alert($(this).val()); 
    $('.changeMe').css("font-family", $(this).val()); 

}); 

$("#size").change(function() { 
    $('.changeMe').css("font-size", $(this).val() + "px"); 
});

Fiddle tutaj: http://jsfiddle.net/AaT9b/

Źródło

2011-10-04 22:36:25

Czysta doskonałość. – Oneezy

Moim zdaniem byłoby czystszym i łatwiejszym rozwiązaniem, aby ustawić klasę na ciele i ustawić czcionkę-rodzina w css zgodnie z tą klasą.
Nie wiem, czy jest to opcja w twoim przypadku.

Źródło

2011-10-04 22:27:27 Andy

+1 za obejrzenie lasu przez drzewa –

Myślę, że kod jest potrzebny do wzmocnienia punktu –

W niektórych przeglądarkach czcionki są jawnie ustawione dla tekstów i wejść, więc nie dziedziczą czcionek z wyższych elementów. Tak więc, myślę, że musisz zastosować style czcionek dla każdego obszaru tekstowego i dane wejściowe również w dokumencie (nie tylko ciało).

Jednym z pomysłów może być dodanie klauzul do ciała, a następnie użycie CSS do odpowiedniego stylu dokumentu.

Źródło

2011-10-04 22:27:48 David

Jeśli o ylko chcesz zmienić czcionkę w textarea potem trzeba tylko zmienić funkcję changeFont() w oryginalnym kodzie do:

function changeFont(_name) { 
    document.getElementById("mytextarea").style.fontFamily = _name; 
}

następnie wybranie czcionki zmieni się tylko czcionki w polu tekstowym.

Źródło

2017-04-26 16:49:56 tom

jQuery zmieniając rodzinę czcionek i rozmiar czcionki

Odpowiedz

Powiązane problemy