2011-10-04 47 views
23

Tôi đang cố gắng thay đổi họ phông chữ và cỡ chữ của văn bản xuất hiện trong vùng văn bản và vùng chứa bằng cách chọn phông chữ từ danh sách, kích thước phông chữ phải được sửa. Tôi cũng đang cố gắng thay đổi màu nền khi chọn phông chữ.jQuery thay đổi họ phông chữ và cỡ chữ

Đó là mã của tôi:

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

Khi tôi thử nó trong trình duyệt của họ phông chữ không thay đổi trong lĩnh vực văn bản. Nó chỉ thay đổi trong container. Bây giờ tôi cũng biết cách đặt kích thước phông chữ mới và nền cho vùng chứa và vùng văn bản khi họ chọn phông chữ.

Tôi sẽ đánh giá cao mọi người trợ giúp!

Trả lời

42

giải pháp làm việc đầy đủ:

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 ở đây: http://jsfiddle.net/AaT9b/

+0

Xuất sắc thuần túy. – Oneezy

5

Theo tôi, nó sẽ là một giải pháp sạch hơn và dễ dàng hơn để chỉ thiết lập một lớp trên cơ thể và đặt phông chữ-gia đình trong css theo lớp đó.
không biết nếu đó là một tùy chọn trong trường hợp của bạn.

+1

+1 để xem rừng qua các cây –

+1

Tôi nghĩ mã là cần thiết để tăng cường điểm –

1

Trong một số trình duyệt, phông chữ được đặt rõ ràng cho văn bản và đầu vào, vì vậy chúng không kế thừa phông chữ từ các phần tử cao hơn. Vì vậy, tôi nghĩ rằng bạn cần phải áp dụng các kiểu phông chữ cho mỗi vùng văn bản và đầu vào trong tài liệu là tốt (không chỉ cơ thể).

Một ý tưởng có thể là thêm các cụm vào cơ thể, sau đó sử dụng CSS để tạo kiểu cho tài liệu cho phù hợp.

0

Nếu bạn o nly muốn thay đổi phông chữ trong TEXTAREA sau đó bạn chỉ cần thay đổi changeFont() chức năng trong mã gốc để:

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

Sau đó, chọn một phông chữ sẽ thay đổi về font duy nhất trong TEXTAREA.

Các vấn đề liên quan