2011-10-04 19 views
23

मैं पाठ्यचर्या में दिखाई देने वाले पाठ के फ़ॉन्ट परिवार और फ़ॉन्ट आकार को बदलने की कोशिश कर रहा हूं और सूची से फ़ॉन्ट चुनकर एक कंटेनर बदलना चाहता हूं, फ़ॉन्ट आकार को ठीक किया जाना चाहिए। एक फ़ॉन्ट उठाए जाने पर भी मैं पृष्ठभूमि के रंग को बदलने की कोशिश कर रहा हूं।jQuery बदलते फ़ॉन्ट परिवार और फ़ॉन्ट आकार

मेरी कोड है:

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

जब मैं ब्राउज़र में यह कोशिश फ़ॉन्ट परिवार पाठ क्षेत्र में नहीं बदलता है। यह केवल कंटेनर में बदलता है। मैं अब भी जानता हूं कि जब फ़ॉन्ट परिवार उठाया जाता है तो कंटेनर और टेक्स्टरेरा के लिए एक नया फ़ॉन्ट आकार और पृष्ठभूमि कैसे सेट करें।

मैं किसी भी मददगार लोगों की सराहना करता हूं!

उत्तर

42

पूर्ण काम कर समाधान:

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

फिडल: http://jsfiddle.net/AaT9b/

+0

शुद्ध उत्कृष्टता को मजबूत करने के लिए कोड की आवश्यकता है। – Oneezy

5

मेरी राय में, यह केवल शरीर पर एक कक्षा निर्धारित करने के लिए एक क्लीनर और आसान समाधान होगा और उस वर्ग के अनुसार फ़ॉन्ट-परिवार को सीएसएस में सेट करेगा।
पता नहीं है कि यह आपके मामले में एक विकल्प है या नहीं।

+1

पेड़ के माध्यम से जंगल को देखने के लिए +1 –

+1

मुझे लगता है कि बिंदु –

1

कुछ ब्राउज़रों में, फोंट टेक्स्ट और इनपुट के लिए स्पष्ट सेट हैं, इसलिए वे उच्च तत्वों से फोंट का वारिस नहीं करते हैं। इसलिए, मुझे लगता है कि आपको प्रत्येक टेक्स्टरेरा और दस्तावेज़ में इनपुट के लिए फ़ॉन्ट शैलियों को भी लागू करने की आवश्यकता है (न केवल शरीर)।

एक विचार शरीर में क्लोज़ जोड़ना हो सकता है, फिर दस्तावेज़ के अनुसार शैली को शैलीबद्ध करने के लिए सीएसएस का उपयोग करें।

0

यदि आप ओ केवल तभी पाठ क्षेत्र में फ़ॉन्ट बदलने के लिए तो आप केवल करने के लिए मूल कोड में changeFont() फ़ंक्शन को बदलने की जरूरत हैं:

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

फिर एक फ़ॉन्ट का चयन केवल पाठ क्षेत्र में फ़ॉन्ट पर बदल जाएगा।

संबंधित मुद्दे