jQuery更改字體家族和字體大小

我試圖通過從列表中選擇字體來更改出現在textarea和容器中的文本的字體家族和字體大小，字體大小應該是固定的。我也試圖在字體被選中時改變背景的顏色。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>

當我嘗試在瀏覽器中的字體系列沒有在文本區域改變。它只在容器中發生變化。我現在也知道如何設置一個新的字體大小和背景的容器和textarea的字體家庭被挑選出來。

我會感謝任何幫助傢伙！

來源

2011-10-04 Tomala

完全可行的解決方案：

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/

來源

2011-10-04 22:36:25

純粹的卓越。 – Oneezy

在我看來，這將是一個更清潔和更簡單的解決方案，只需在body上設置一個類，然後根據該類設置css中的font-family。
不知道這是否是您的案例中的一個選項。

來源

2011-10-04 22:27:27 Andy

+1通過樹看到的森林 –

我認爲代碼是必要的，以加強點 –

在某些瀏覽器中，爲textareas和輸入顯式設置字體，所以它們不會從較高元素繼承字體。所以，我認爲你需要爲每個textarea應用字體樣式，並在文檔中輸入（不只是正文）。

一個想法可能是添加clases到body，然後使用CSS來相應地設置文檔的樣式。

來源

2011-10-04 22:27:48 David

如果你O NLY要更改文本區域的字體，那麼你只需要在原來的代碼來改變changeFont（）函數：

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

然後選擇字體只能在TEXTAREA改變字體。

來源

2017-04-26 16:49:56 tom

jQuery更改字體家族和字體大小

回答

相關問題